Question

我在一个页面上有2个局部视图，每个视图都有自己独特的模型。我想异步地从一个局部视图（它是一个表单）发布数据，然后从控制器获取响应并将其加载到第二个局部视图中。

基本上我的页面结构如下。

家长观点：

<div id="viewA">
    @Html.Partial("_viewA, Model.viewA)
</div>
<div id="viewB">
    <p>Loading...</p>
</div>

_viewA：

@model ModelA

@using (Html.BeginForm())
{
    @Html.LabelFor(model => model.Thing)
    @Html.EditorFor(model => model.Thing)
    <input type="submit" value="Submit">
}

_viewB：

@model ModelB

<table>
    <tr>
        <th>
            Column 1
        </th>
        <th>
            Column 2
        </th>
    </tr>
    @foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Col1)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Col2)
        </td>
    }
</table>

控制器：

[HttpPost]
public ActionResult Something([Bind(Include="Thing")] ModelA modela)
{
    //do stuff
    ModelB modelb = new ModelB();
    return PartialView("_viewB", modelb);
}

使用Javascript：

//I'm not sure...
//Probably some AJAX call
//Then we stick the response into div#viewB

关键是我需要这一切都是异步发生的。用户填写表单点击一个按钮，数据被发送到服务器，返回响应，部分页面更新，所有都没有回发。

我需要哪些Javascript（以及其他更改）才能使这一切正常工作？

谢谢！

Answer 1

您可以使用ajax提交表单，并在ajax调用的响应回调时，根据需要更新DOM。

所以让我们在表单元素中添加一个Id，我们可以用它来连接ajax行为

@using (Html.BeginForm("Something","Student",FormMethod.Post,new { id="studForm"}))
{
    @Html.LabelFor(model => model.Thing)
    @Html.EditorFor(model => model.Thing)
    <input type="submit" value="Submit">
}

现在使用此javascript来收听提交事件，阻止默认表单提交（因为我们要做一个ajax帖子），序列化表单并通过$.post方法发送。您可以使用jQuery serialize方法获取表单的序列化版本。

$(function(){

   $("#studForm").submit(function(e){
       e.preventDefault();  //prevent normal form submission

       var actionUrl = $(this).attr("action");  // get the form action value
       $.post(actionUrl ,$(this).serialize(),function(res){
          //res is the response coming from our ajax call. Use this to update DOM
          $("#viewB").html(res);
       });
   });

});

使用MVC的异步发布模型和负载响应

1 个答案: