MVC 3 Форма отправки через JQuery перезагружает отправляющее представление, а не представление, возвращаемое контроллером - PullRequest
Новая
       4

MVC 3 Форма отправки через JQuery перезагружает отправляющее представление, а не представление, возвращаемое контроллером

1 голос
/ 13 июня 2011

Я новичок в MVC / Jquery и у меня проблема. У меня есть форма, содержащая WebGrid с якорями редактирования / удаления в каждой строке. Когда пользователь нажимает кнопку edit, мне нужно запустить некоторый скрипт для загрузки объекта json, который нужен контроллеру, прежде чем возвращать представление edit. Использование кнопки отправки работает нормально, но когда я пытаюсь опубликовать через 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, но мне нужно вернуть больше, чем просто идентификатор вот почему я использую JSON.

Ответы [ 2 ]

6 голосов
/ 13 июня 2011

Ничего не происходит, потому что в вашем вызове 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; 
});
1 голос
/ 13 июня 2011

Чтобы упростить ответ Крейга М - 

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