在MVC 4中的同一弹出对话框中显示模型错误

时间:2016-09-29 13:17:37

标签: c# jquery ajax asp.net-mvc-4 jquery-ui

我正在开发具有Index.cshtml的MVC4应用程序(带搜索条件和搜索按钮的主要页面),_PartialView.cshtml(显示带有更新/删除链接的记录的部分视图),Edit.cshtml(用于更新的视图)。

单击更新链接后,将打开弹出模式对话框,其中包含我应用的编辑视图(Edit.cshtml)必需& StringLength属性到某些字段。如果某些属性未满足,我想在同一个弹出窗口中显示它们。但是在控制器动作方法中,我正在返回View,因此模态弹出消失了&编辑视图在div中打开。

我的记录显示为partialView(_PartialView.cshtml)中的网格,其中包含Update链接和javascript函数

<a href="javascript:void(0);" class="anchorDetail" onclick="editFunc(@item.SrNo)">Update</a></pre>


function editFunc(id) {
var TeamDetailPostBackURL = '/Home/Edit';
var $buttonClicked = $(this);
var options = { "backdrop": "static", keyboard: true };

$.ajax({
    type: "GET",
    url: TeamDetailPostBackURL,
    cache: false,
    contentType: "application/json; charset=utf-8",
    data: { "SrNo": id },
    datatype: "json",
    success: function (data) {
        $('#myModalContent').html(data);
        $('#myModal').css('display', 'block');
        $("#myModal").dialog({
            title: 'Edit Data',
            modal: true,
            bgiframe: true,
            show: 'slide',
            hide: 'slide',
            width: 750
        });
        $('#myModal').dialog("show");
    },

    error: function () {
        alert("Dynamic content load failed.");
    }
});
}

我的Edit.cshtml:

 @using (Ajax.BeginForm("Edit", "Home", new AjaxOptions { UpdateTargetId = "divPartial", HttpMethod = "POST", InsertionMode = InsertionMode.Replace, OnBegin = "CallEditBegin", OnSuccess = "CallUnblock" }))
 {
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)   

    <fieldset>

        <div class="editor-label" style="display:none" >
            @Html.LabelFor(model => model.SrNo)
        </div>
        <div class="editor-field" style="display:none">
            @Html.EditorFor(model => model.SrNo)
            @Html.ValidationMessageFor(model => model.SrNo)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.UserName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.UserName)
            @Html.ValidationMessageFor(model => model.UserName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.ReaderName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ReaderName)
            @Html.ValidationMessageFor(model => model.ReaderName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.UploadDate)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.UploadDate, new { @readonly = "readonly" })
            @Html.ValidationMessageFor(model => model.UploadDate)
        </div>

        <p>
            <input type="submit" value="Save" />
        </p>
    </fieldset>
 }

我的HomeController.cs

[HttpPost]
  public ActionResult Edit(UploadData uploadData)
  {
      if (!ModelState.IsValid)
      {

          return View(uploadData);
      }
       else 
      {

          // Processing Logic here

      }
   }

我的Model类(UploadData.cs)是:

public class UploadData
{
    public int SrNo { get; set; }

    [Display(Name = "User Name")]
    [Required(ErrorMessage = "User Name is required")]
    public string UserName { get; set; }

    [Display(Name = "Reader Name")]
    [Required(ErrorMessage = "Reader Name is required")]
    [StringLength(100, ErrorMessage = "The {0} must be at least {2} characters long.", MinimumLength = 6)]
    public string ReaderName { get; set; }

    [Required(ErrorMessage = "Upload Date is required")]
    [Display(Name = "Upload Date")]
    public DateTime UploadDate { get; set; }

}

现在需要一些字段,而ReaderName的最小长度为6个字符。如果将执行下面未满足的任何条件。

if (!ModelState.IsValid)
{

      return View(uploadData);
}

但接下来发生的事情,我的弹出式对话框消失了&amp; div将在主pg上显示错误消息。 我想在控制面前在弹出窗口上显示它们。

我很困惑在模型错误的情况下该做什么,以便它们在控制后出现在同一个弹出窗口中。 请给出一些建议,我缺少什么......

2 个答案:

答案 0 :(得分:0)

   I have a suggestion to put a div on your layout/view, with a condition  

  <div id="divPartial">
    @if (TempData["ErrorMsg"] != null)
            {
    <"p class="alert alert-warning" role="alert">"@TempData["ErrorMsg"]</p>
    } 
    </div>

    Then On your controller:

       [HttpPost]
      public ActionResult Edit(UploadData uploadData)
      {
          if (!ModelState.IsValid)
          {

              return View(uploadData);
          }

    else  {
                TempData["ErrorMsg"] = "";

                      foreach (var items in ModelState.Values)
                      {
                          foreach (var er in items.Errors)
                          {
                                
                           TempData["ErrorMsg"] = er.ErrorMessage.ToString() " " + TempData["ErrorMsg"].ToString();
                            }
                            
                        }

                        return View(uploadData);
                    }
    }



 

   

答案 1 :(得分:0)

  

我建议在布局/视图上添加div,条件为:

      <div id="divPartial">
    @if (TempData["ErrorMsg"] != null)
            {
    <"p class="alert alert-warning" role="alert">"@TempData["ErrorMsg"]</p>
    } 
    </div>

  

然后在您的控制器上

       [HttpPost]
      public ActionResult Edit(UploadData uploadData)
      {
          if (!ModelState.IsValid)
          {

              return View(uploadData);
          }

    else  {
                TempData["ErrorMsg"] = "";

                      foreach (var items in ModelState.Values)
                      {
                          foreach (var er in items.Errors)
                          {

                           TempData["ErrorMsg"] = er.ErrorMessage.ToString() " " + TempData["ErrorMsg"].ToString();
                            }

                        }

                        return View(uploadData);
                    }
    }