Asp.net mvc 4 使用计划在多个位置使用的表单帖子创建局部视图

如何使用计划在多个位置使用的表单帖子创建局部视图

局部视图将有一个表单，该表单在数据存储中创建一个条目，并在该表单下显示持久化的数据。 因此，提交表单后，我将在表单下的网格状结构中看到我的条目，而无需切换父视图。 如果模型无效，也将显示错误。这里的诀窍是，如何在不创建操作的情况下保持当前页面 在显示局部视图的每个视图的控制器中

我将在10个不同的父视图中使用这个局部视图

下面，我将提供一些代码，帮助社区准确理解这个问题

我应该如何配置代码以实现我的目标

谢谢

这是局部视图示例

@model ViewModels.CommentViewModel

@using (Html.BeginForm("Index", "Comment", FormMethod.Post))
{
@Html.AntiForgeryToken()

<div class="form-horizontal">
    @Html.ValidationSummary()


    <div class="form-group">
        <label class="control-label col-md-2">Please Type Your Name</label>
        <div class="col-md-10">
            @Html.TextBoxFor(model => model.Name, new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.Name)
        </div>
    </div>
<input id="addComment" type="submit" value="Add" />
</div>
}
@foreach (var item in Model.Comments)
{
<p>
    @item.Name
</p>

}

---

如果您想在不重新加载页面的情况下提交表单并检索更新的数据，那么您就要讨论AJAX。事实上，这是一种片面的观点，在这种情况下毫无意义。不管这个局部视图将呈现在多少个不同的视图中，您只需要一个控制器中的一个动作就可以响应AJAX请求。然后，您只需要使用JavaScript执行以下操作，这些操作可以通过外部文件包含在需要此表单的任何视图中：

$('#MyPartialViewForm').on('submit', function (e) {
    // prevents form from submitting standard way, causing page refresh
    e.preventDefault();

    $.post('/url/that/handles/form', $(this).serialize(), function (results) {
        // results will be a rendered partial with the data here,
        // which you can use to replace the content of a div or
        // something on your page.
        $('#DivWhereSubmittedDataIsDisplayed').html(results);
    });
});

然后，在响应AJAX请求的操作中：

[HttpPost]
public ActionResult ActionForAjaxForm(FormModel model)
{
    // do something like save the posted model

    return PartialView("_PartialViewThatRendersData", model);
}

---

这不是服务器端的问题，您是否考虑过在需要时使用一些javascript来包含html元素？有很多框架实现了这一点，我使用的是angularjs，它避免了在服务器端建模静态页面

[HttpPost]
public ActionResult ActionForAjaxForm(FormModel model)
{
    // do something like save the posted model

    return PartialView("_PartialViewThatRendersData", model);
}