如何在不加载MVC的情况下更新部分数据

MVC 发表于 Dev

MVC

我想上传部分视图数据而无需重新加载html。我曾经Json获取数据，但是我认为Script中存在一些问题。该Success部分未执行。

  [HttpPost]
        public JsonResult HorseTracker(ClsHorseTracker model)
        {
            try
            {
                if (ModelState.IsValid)
                {

                  horseTrackerDetails.InsertUpdateHorseTracker(model);
                    }
                                        }
                return Json(model, JsonRequestBehavior.AllowGet);
            }
            catch
            {
                return Json(new { success = false });
            }
        }

 [ChildActionOnly]
        public PartialViewResult HorseTrackerDetails()
        {
            return PartialView("_pHorseTrackerDetails", horseTrackerDetails.HorseTrackerList());
        }

主视图

 @using (Html.BeginForm("HorseTracker", "HorseTracker", FormMethod.Post, new { id = "CreateForm" }))
        {
            <div class="panel panel-default" style="font-size:12px;">

                <div class="panel-body">
                    <div class="form-group">    

                        @Html.TextBoxFor(m => m.HorseName)

                        @Html.DropDownListFor(m => m.HorseTypeName, Model.HorseTypeList)

                    </div>
                    <input type="submit" value="Save" class="btn btn-primary pull-right" />
                </div>
            </div>

        }

    </div>
    <div id="partial" class="col-md-8">
        @Html.Action("HorseTrackerDetails", "HorseTracker")
    </div>

部分视图

  <table class="table">
                <tr>

                    <th>
                        @Html.DisplayNameFor(model => model.HorseName)
                    </th>

                    <th>
                        @Html.DisplayName("Type")
                    </th>


                </tr>

                @foreach (var item in Model)
                {
                    <tr>

                        <td>
                            @item.HorseName
                        </td>

                        <td>
                            @item.HorseTypeName
                        </td>
</tr>
</table>

脚本

  $(document).ready(function () {
            var url = '@Url.Action("HorseTracker", "HorseTracker")';
            $('#CreateForm').submit(function () {

                  if (!$(this).valid()) {
                    return;
                   }
                 $.post(url,$(this).serialize(), function (response) {
                     if (response.success) {
                         debugger;
                         $('#partial').html(response);
                     }
                     else {
                         var message = response.message;
                         alert(message);
                      }
                });
                   return false;
               })
        })

用户名

除非使用POST方法更改模型属性的值，否则没有理由返回模型（或局部视图）。您可以简单地根据表单中的值将新行追加到表中。

您的控制器方法应为

[HttpPost]
public JsonResult HorseTracker(ClsHorseTracker model)
{
    try
    {
        if (ModelState.IsValid)
        {
              horseTrackerDetails.InsertUpdateHorseTracker(model);
              return Json(new { success = true});
        }
        // see notes below
    }
    catch
    {
        return Json(new { message = "your error message" });
    }
}

然后将脚本修改为

var url = '@Url.Action("HorseTracker", "HorseTracker")';
$('#CreateForm').submit(function () {
    if (!$(this).valid()) {
        return;
    }
    var name = $('#HorseName').val();
    var type = $('#HorseTypeName').find('option:selected').text()

    $.post(url, $(this).serialize(), function (response) {
        if (response.success) {
            var row = $('<tr></tr>');
            row.append($('<td></td>').text(name));
            row.append($('<td></td>').text(type));
            $('.table').append(row);
        } else if (response.message) {
            alert(response.message);
        }
    });
    return false;
})

笔记

如果ModelState无效，则应返回ModelState错误列表，以便可以更新由@Html.ValidationMessageFor(...);To生成的相应元素。

var errors = ModelState.Keys.Where(k => ModelState[k].Errors.Count > 0).Select(k => new { propertyName = k, errorMessage = ModelState[k].Errors[0].ErrorMessage });
return Json( new { errors = errors });

然后else if (response.errors) { // update the error messages }在success回调中添加代码块

如果将更好地呈现<table>与<thead>和<tbody>元素，并给予<tbody>一个id属性，并以此作为选择添加新行

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。