asp.net mvc-mvc 3通过JQuery提交表单重新加载提交视图，而不是控制器返回的视图

Question

我是MVC/Jquery的新手，遇到了一个问题。我有一个包含WebGrid的表单，每行都有编辑/删除锚。当用户单击编辑时，我需要运行一些脚本来加载控制器需要的json对象，然后再返回编辑视图。使用提交按钮可以很好地工作，但当我尝试通过Ajax发布时，编辑视图永远不会出现，带有网格的表单只会重新加载。

表单

@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "shopform" }))
{
    <div id="grid" class="gridWrapper1">
    </div>
}

脚本

        function EditShop(id) {
                idShop = id; // save id for json scraper later
                $("#shopform").submit();
                return 0;
        }
       $(document).ready(function() {
            $("#shopform").submit(function(){
                var jsonData = GetJsonModel(); // grabs various fields including idShop
                $.ajax({
                    type:'POST',
                    url:'/Admin/Shops/Edit/',
                    data: jsonData,
                    contentType: 'application/json; charset=uft-8',
                    error: ajaxError,
////// edit with solution here
                    success: function(data) {
                       $(document)[0].body.innerHTML = data;  // contains View returned by 
                    }                                         // controller action
                });
                return false; 
            });
        });

用于构建带有编辑/删除锚标记的网格列的控制器代码：

    grid.Column(format: (item) =>
    {
      return new HtmlString(
           "<a href='JavaScript:void(0)' name='editShop' value='" +
              item.ShopID.ToString() +
              "' class='linkbutton' " + "onclick='EditShop(" + item.ShopID.ToString() + 
              ");'>Edit</a>&nbsp;&nbsp;&nbsp;" +
           "<a href='JavaScript:void(0)' name='delShop' value='" +
              item.ShopID.ToString() +
              "' class='linkbutton' onclick='DelShop(" +
              item.ShopID.ToString() + ");'>Remove</a>"
        );
}),

最后是PRG的控制器操作以进行编辑：

    [HttpPost]
[ActionName("Edit")]
[ViewModelFilter(Param = "model", JsonDataType = typeof(ShopsViewModel))]
public ActionResult EditViaPost(ShopsViewModel model)
{
    int nid = model.ShopID;
    ShopViewModel shop = new ShopViewModel(nid);
    Session["model"] = (object) model;
    return RedirectToAction("Edit", new RouteValueDictionary(new { shop.Name }));
}
[HttpGet]
[ActionName("Edit")]
public ActionResult EditViaGet(string slug) //, string curPage, string rowsPerPage )
{
    ShopsViewModel model = (ShopsViewModel)Session["model"];
    ShopViewModel shop = null;
    if (model != null)
    {
        int nID = model.ShopID;
        ShopViewModel shop = new ShopViewModel(nID);
    } ... // create empty shop omitted for brevity
    return View("Edit", shop);  <--- THIS DOES NOT LOAD IF SUBMITTING VIA AJAX
}

如果我将控制器/操作添加到表单声明中并使用按钮提交，那么编辑视图确实会呈现，所以我怀疑我没有正确处理$.post的返回，但我需要返回的不仅仅是ID，所以这就是我使用JSON的原因。

Answer 1

没有发生任何事情，因为在Ajax调用上没有定义成功回调来处理控制器返回的数据。您的视图将在成功处理程序中返回。

$("#shopform").submit(function(){
    var jsonData = GetJsonModel(); // grabs various fields including idShop
    $.ajax({
        type:'POST',
        url:'/Admin/Shops/Edit/',
        data: jsonData,
        contentType: 'application/json; charset=uft-8',
        success: function(yourView) {
            alert(yourView);
        },
        error: ajaxError
    });
    return false; 
});

Answer 2

为了简化Craig M的答案-

$('#shopForm').submit(function(){
var jsonData = GetJsonModel(); // grabs various fields including idShop
$('#shopform).load('Admin/Shops/Edit #shopform'
,jsonData
,function(responseText, textStatus, XMLHttpRequest) { 
          if(textStatus == "error") ajaxError(); 
}