C# 单击“提交”按钮时刷新部分视图内容

我有一个强类型视图，它有一个表单，我在其中放置了一个字段showtime当单击submit按钮时，我想将条目保存到数据库中，同时在我放置在主视图的部分视图中显示该条目以及数据库中的其他条目。当调用索引操作方法时，将呈现主视图。我想在保存新条目时更新局部视图，而不重新加载整个页面，只需刷新局部页面即可

以下是我的看法：

@model Bookmany.Admin.Models.Theater.TheaterShowTimeViewModel

@{
    ViewBag.Title = "Theater showTimes / BookMany";
 }

<h3>Theater ShowTimes</h3>
 @using (Html.BeginForm())
 {
@Html.AntiForgeryToken()

<div class="form-horizontal">

    <hr />
    @Html.ValidationSummary(true)

    <div class="form-group">
        @Html.LabelFor(model => model.TheaterID, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownListFor(model => model.TheaterID, Model.AvailableTheaters)
            @Html.ValidationMessageFor(model => model.TheaterID)
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.ShowTimeName, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.ShowTimeName)
            @Html.ValidationMessageFor(model => model.ShowTimeName)
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Save" class="btn btn-default" />
        </div>
    </div>
</div>
}

<div>
  @Html.Partial("_TheaterShowTimeList", Model.TheaterShowTimeList)
</div>

我的问题：

当我在字段中输入一个值并提交表单时，现在保存在局部视图中的条目只会与更新的列表一起返回

---

我想在不重新加载整个页面的情况下更新部分视图如何做到这一点？

正如Stephen Muecke所说，我在单击提交按钮时使用ajax发布表单

<script type="text/javascript" >
$(function () {
$('form').submit(function () {
    if ($(this).valid()) {
        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function (result) {
                $('#ShowTimeName').val("");
                $('#theaterShowList').html(result);
            }
        });
    }
    return false;
  });
 });
</script>

---

这解决了我的问题

您需要使用ajax提交表单（不是普通的提交），并返回可以添加到表单中的部分视图DOM@StephenMuecke，我将表单提交为：使用（Ajax.BeginForm（“Index”，“TheaterShowTime”，新的AjaxOptions{HttpMethod=“POST”，InsertionMode=InsertionMode.Replace，UpdateTargetId=“theaterShowList”}）{@Html.AntiForgeryToken（）@*我的控件变为hre*@}但这仍然会返回部分视图，仅返回我需要在操作中更改的内容。您问题中的代码显示

Html.BeginForm（）

not

Ajax.BeginForm（）

，因此不确定您所说的内容脚本对我来说是否正确。该操作将重新加载孔页面并仅呈现局部视图。你知道为什么会这样吗？谢谢

    public ActionResult Index()
    {
        var model = new TheaterShowTimeViewModel();

        //Bind Theater dropdown with selected value
        model.AvailableTheaters = GetTheaters();
        model.TheaterShowTimeList = _theaterShowTimeService.GetAllTheaterShowTime();
        return View(model);

    }

    [HttpPost]
    public ActionResult Index(TheaterShowTimeViewModel model)
    {
        if (ModelState.IsValid)
        {
            InsertOrUpdateTheaterShowTime(model);
            model.TheaterShowTimeList=_theaterShowTimeService.GetAllTheaterShowTime();
            return PartialView("_TheaterShowTimeList", model.TheaterShowTimeList);
        }
        return View(model);
    }

<script type="text/javascript" >
$(function () {
$('form').submit(function () {
    if ($(this).valid()) {
        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function (result) {
                $('#ShowTimeName').val("");
                $('#theaterShowList').html(result);
            }
        });
    }
    return false;
  });
 });
</script>

    [HttpPost]
    public ActionResult Index(TheaterShowTimeViewModel model)
    {
        if (ModelState.IsValid)
        {
            InsertOrUpdateTheaterShowTime(model);
            model.TheaterShowTimeList=_theaterShowTimeService.GetAllTheaterShowTime();
            //return RedirectToAction("Index", new { id = model.TheaterID });
            //return Json(model.TheaterShowTimeList);
            return PartialView("_TheaterShowTimeList", model.TheaterShowTimeList);
        }
        return View(model);
    }