MVC 모달 아약스 양식

Question

내 질문에 내가 달성하고자하는 것은 간단한 입력 폼을 포함하는 대화 상자를 표시하는 것입니다 this

에 비슷한입니다. 기사의 수량과 마찬가지로 사용자가 제출을 클릭하면 전체 대화 상자가 닫히고 전체 페이지를 다시로드하지 않고 데이터를 제출해야합니다.

이 양식에 의해로드 된 부분보기입니다 :이 대화 JS입니다

는

@model TRUNCATED.Models.AddToCartModel 

<script src="~/Scripts/jquery-1.7.1.min.js"></script> 
<script src="~/Scripts/jquery.validate.min.js"></script> 
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script> 

@using (Html.BeginForm("AddToCart", "Order", new AjaxOptions { // DO I NEED ANY? })) 
{ 
    <fieldset> 
     <legend>AddToCartModel</legend> 

     <img src="@Url.Action("GetImage", "File", new { ArticleId = Model.ArticleId })" title="Artikelbild" style="resize:both; width: 300px; height:200px;" /> 

     <div class="editor-label"> 
      @Html.LabelFor(model => model.ArticleId) 
     </div> 
     <div class="editor-field"> 
      @Html.EditorFor(model => model.ArticleId) 
      @Html.ValidationMessageFor(model => model.ArticleId) 
     </div> 

     <div class="editor-label"> 
      @Html.LabelFor(model => model.Quantity) 
     </div> 
     <div class="editor-field"> 
      @Html.EditorFor(model => model.Quantity) 
      @Html.ValidationMessageFor(model => model.Quantity) 
     </div> 

     <p> 
      <input type="submit" value="Add to Cart" /> 
     </p> 

    </fieldset> 
} 

:에서

@Html.ActionLink("Add to Cart", "AddToCart", 
new { id =item.ArticleId}, 
new { @class = "showDialog" } 

:

$("#dialog").dialog({ 
    autoOpen: false, 
    resizeable: false, 
    width: 350, 
    height: 600, 
    modal: true, 
    show: { 
     effect: "blind", 
     duration: 300 
    }, 
    hide: { 
     effect: "blind", 
     duration: 300 
    }, 
    buttons: { 
     "Close": function() { 
      $(this).dialog("close"); 
     } 
    } 
}); 

$(".showDialog").on("click", function (e) { 
    $('#dialog').load(this.href).dialog('open'); 
    return false; 
}); 

이 내가 대화 상자를 열 방법입니다 컨트롤러 :

[HttpGet] 
public ActionResult AddToCart(int id) 
{ 
    return PartialView("_AddToCart", new AddToCartModel() { ArticleId = id }); 
} 

[HttpPost] 
public ActionResult AddToCart(AddToCartModel atm) 
{ 
    if (OrderData.CartItems.Count > 0) 
     atm.Pos = OrderData.CartItems.Max(i => i.Pos) + 1; 
    else 
     atm.Pos = 1; 

    OrderData.CartItems.Add(atm); 

    return // What goes here? 
} 

Im 이것에 새로운 것이고 나는 여기에서 잘못하고있는 어떤 단서도 가지고 있지 않습니다. 나는 HML을 대체했습니다. 아약스와 그러나 이것은 아무것도 바뀌지 않았다.

그래도 작동하지만 전체 페이지를 다시로드합니다. 웹 페이지가 뒤로 물결을 일으키는 것과 같은 부작용이 있습니다.

Answer 1

대신 BeginForm 대신 Ajax.BeginForm을 사용하고 Succcess 이벤트에서 창 닫기 함수를 호출해야한다고 생각합니다. 당신이

[HttpPost] 
public ActionResult AddToCart(AddToCartModel atm) 
{ 
    if (OrderData.CartItems.Count > 0) 
     atm.Pos = OrderData.CartItems.Max(i => i.Pos) + 1; 
    else 
     atm.Pos = 1; 

    OrderData.CartItems.Add(atm); 

    return Content("<p>ITEM ADDED TO CART</p>");//will be returned by ajax 
} 

처럼 POST 액션이를 구현하고 UpdateTargetId와 아약스 양식을 수정할 수 있습니다

@using (Ajax.BeginForm("Action", "Controller", new AjaxOptions { HttpMethod = "Post", OnSuccess = "CloseWindow()" }, new { id = "id", @class = "class" })) 
{ 
} 

는 Aditionaly 당신은 사용자에게 어떤 메시지를 추가해야하는 경우. 메시지는 실제로 당신은 대화 상자에서 양식의 PartialView을로드하고있어,이 ID

@using (Ajax.BeginForm("Action", "Controller", new AjaxOptions { UpdateTargetId = "Paceholder to message", HttpMethod = "Post", OnSuccess = "CloseWindow()" }, new { id = "form-catalog", @class = "form-horizontal" })) 
{ 
} 

Answer 2

당신은 컨트롤러에 아약스 POST 요청을 수행하지 않을만한 요소에 추가됩니다 당신이 그것을 제출 쳤을 때 평소대로 제출 중입니다.

Ajax.BeginForm을 구현하거나 jQuery를 사용하여 제출 버튼에 click 이벤트를 캡처하고 컨트롤러에 Ajax 게시 요청을 할 수 있습니다.

var values = $('#form-id').serialize(); 
$.ajax({ 
    url: 'path/to/controller/method', 
    data: values, 
    type: "POST", 
    dataType: "json", 
    data: values, 
    success: function(result){ 
     // do something on success 
    }, 
    error: function(){ 
     // do something on error 
    }  
});