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(); 
}

通过JQuery提交的MVC 3表单重新加载提交视图而不是控制器返回的视图

2 个答案: