1

如何使用我计划在多个地方使用的表单帖子创建部分视图？

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

我将在 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>

}

这是控制器

public PartialViewResult Index(int id)
    {
        var model = new CommentViewModel() { Comments= db.Comments.Where(x=> x.NewsId == id && x.isApproved== true )};
        return PartialView("_Comments", model);

    }
[HttpPost]
    public PartialViewResult Comment(int id, CommentViewModel model)
    {
        if (ModelState.IsValid)
        {
            var comment = new Comment()
            {
                Name = model.Name,
                Title = model.Title,
                CommentContent = model.Content,
                Email = model.Email,
                CreationDate = DateTime.Now,
                RefId = Guid.NewGuid(),
                isApproved = false,
                NewsId = id
            };
            db.Comments.Add(comment);
            db.SaveChanges();
            return PartialView();
        }

        return PartialView();
    }
4

1 回答 1

0

如果您想在不重新加载页面的情况下提交表单和检索更新的数据，那么您正在谈论 AJAX。在这种情况下，这是一种片面的观点是没有意义的。这个局部视图将在多少个不同的视图中呈现并不重要，您只需要在一个控制器中执行一个可以响应 AJAX 请求的操作。然后，您只需要使用 JavaScript 执行以下操作，这些 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);
}
于 2014-11-04T13:56:24.380 回答