Question

I’m new to MVC/Jquery and am having a problem. I have a form containing a WebGrid with edit/delete anchors on each row. When the user clicks edit I need to run some script to load a json object that the controller needs before returning an edit view. Using a submit button works fine but when I try to post via Ajax the edit view never appears, the form with the grid just reloads.

The form

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

The script

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

Controller code to build the grid column with edit/delete anchor tags:

    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>"
        );
}),

And finally the Controller actions for PRG for editing:

    [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
}

If I add the controller/action to the form declaration and submit with a button the edit view does render so I suspect I’m not handling the return from $.post correctly, but I need to return more than just the ID so that’s why I’m using JSON.

Answer 1

Nothing is happening because you have no success callback defined on your Ajax call to handle the data returned by the controller. Your view will be returned in the success handler.

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