点击提交按钮时刷新部分查看内容

Question

我有一个强类型视图，它有一个表单，当我单击提交按钮时放置一个字段showtime我想将条目保存到数据库中也显示该条目以及其他在我放在主视图上的部分视图内的数据库中的条目。当调用Index操作方法时，将呈现主视图。如果在不重新加载整个页面的情况下保存新条目，则只需刷新部分页面，我想要更新部分视图。

这是我的观点：

@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> 

这里是我的局部视图：

@model IEnumerable<Bookmany.Core.Domain.TheaterShowTime> 

<table class="table"> 
<tr> 
    <th> 
     Theater Name 
    </th> 
    <th> 
     @Html.DisplayNameFor(model => model.ShowTimeName) 
    </th> 
    <th></th> 
</tr> 

@foreach (var item in Model) 
{ 
    <tr> 
     <td> 
      @Html.DisplayFor(modelItem => item.Theater.TheaterName) 
     </td> 
     <td> 
      @Html.ActionLink("Edit", "Edit", new { id = item.TheaterShowTimeID }) | 
      @Html.ActionLink("Details", "Details", new { id = item.TheaterShowTimeID }) | 
      @Html.ActionLink("Delete", "Delete", new { id = item.TheaterShowTimeID }) 
     </td> 
    </tr> 
} 

我的操作方法：

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); 
    } 

我的问题：

，当我在字段中输入一个值并提交表单，该条目现在保存的局部视图只用更新列表

我想无需重新加载整个页面如何实现这一目标，以更新局部视图返回？

Answer 1

像斯蒂芬·马克说，我用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> 

在返回的局部视图我的操作方法：

[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); 
    } 

这解决了我的问题