在弹出窗口内的部分视图中进行验证

时间:2014-07-26 08:31:09

标签: javascript jquery asp.net-mvc popup

我在MVC工作,我有一个场景如下:        我有一个名为ManageResource的视图,其中i il显示网格中的可用资源以及添加新资源的按钮。如果我单击添加新资源按钮弹出窗口,其中包含部分视图,当我单击保存而不输入任何值时,我必须在弹出窗口中显示验证结果,当我输入所需字段时,应填充值在网格中,弹出窗口应该关闭。

"我没有在弹出窗口中获得验证结果,但能够保存数据"

以下是我的代码:

Model-tblUser
public partial class tblUser
{
        public int UID { get; set; }
         [Required]
        public int EmpID { get; set; }
         [Required]
        public string FirstName { get; set; }
         [Required]
        public string LastName { get; set; }       
         [Required]
        public decimal Salary { get; set; }       
}

View-ManageResource
         function Create() {

            BootstrapDialog.show({
            title: "Add Resource",
            message: $('<div id="CreatePopup"></div>').load('@Url.Action("Create", "Resource")')
           });
            return false;
           }

    <input type="button" id="AddNewCompany" onclick="Create()" class="push_button blue btn_width"  value="Add New Resource" />
partial view- Create   
  

    function SaveResource() {

        var obj = [];
        var EmpID = $('#EmpID').val();
        var FirstName = $('#FirstName').val();
        var LastName = $('#LastName').val();        
        var Salary = $('#Salary').val();
        if ($("#IsActive").attr('checked', true)) {
            var IsActive = 1;
        }
        else {
            var IsActive = 0
        }

        var newrecord = {
            "EmpID": EmpID, "FirstName": FirstName, "LastName": LastName, "Salary": Salary,   
        };       
        var senddata = JSON.stringify(newrecord);

    jQuery.ajax({
        type: "POST",
        url: '@Url.Action("Create", "Resource")',
        data: JSON.stringify({ "data": senddata }),
        datatype: 'json',
        contentType: "application/json; charset=utf-8",
        success: function (result) {            
            if (result == true) {              
                window.location.href = '@Url.Action("ManageResource", "Resource")';
            } else {            
                $("#CreatePopup").html(result);
                }
            }
        });           
    }
     

@using(Html.BeginForm())           {           @ Html.AntiForgeryToken()          

        @Html.ValidationSummary(false)

        <div class="form-group">
            @Html.LabelFor(model => model.EmpID, "Employee ID", new { @class = "control-label col-md-1 col-md-3" })
            <div class="col-md-6">
                @Html.EditorFor(model => model.EmpID)
                @Html.ValidationMessageFor(model => model.EmpID)


            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.FirstName,"First Name",  new { @class = "control-label col-md-1 col-md-3" })
            <div class="col-md-6">
                @Html.EditorFor(model => model.FirstName)
                @Html.ValidationMessageFor(model => model.FirstName)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.LastName,"Last Name",  new { @class = "control-label col-md-1 col-md-3" })
            <div class="col-md-6">
                @Html.EditorFor(model => model.LastName)
                @Html.ValidationMessageFor(model => model.LastName)
            </div>
        </div>        

        <div class="form-group">
            <div class="col-md-offset-5 col-md-10">
                <input type="button" id="CreateResource" onclick="SaveResource()" value="Create" class="btn btn-default" />
            </div>
        </div>
          </div>       
}
   Resource Controller     

      public PartialViewResult Create(string data)   
      {             
         JObject o = JObject.Parse(data);//parsing the json data

         tblUser tbluser = new tblUser(); //creating instance for model tblUser      

            if ((string)o["EmpID"] != "" && (string)o["FirstName"] != "")// if all the required fields are present then add to db
                 {
                    db.tblUsers.Add(tbluser);//assign values here
                    tbluser.EmpID = (int)o["EmpID"];
                    tbluser.FirstName = (string)o["FirstName"];
                tbluser.FirstName = (string)o["FirstName"];
                tbluser.LastName = (string)o["LastName"];
                tbluser.EmailID = (string)o["EmailID"];
                tbluser.Password = (string)o["Password"];
                tbluser.RoleID = (int)o["RoleID"];
                tbluser.DeptID = (int)o["DeptID"];
                tbluser.DesignationID = (int)o["DesignationID"];
                tbluser.Salary = (int)o["Salary"];
                tbluser.IsActive = (bool)o["IsActive"];
                tbluser.CreatedBy = 121;
                tbluser.CreatedDate = System.DateTime.Now;
                tbluser.UpdatedBy = 121;
                tbluser.UpdatedDate = System.DateTime.Now;
                db.SaveChanges();                       
                return RedirectToAction("ManageResource");//return to main view when saved
            }
            else
            {
               //return with validation summary to partialview popup
                 return PartialView(tbluser);
            }                   
      }

1 个答案:

答案 0 :(得分:0)

使用AJAX加载表单时,需要告诉jQuery不显眼的验证,以将验证data-属性添加到表单元素。您需要添加:$.validator.unobtrusive.parse('#YourFormSelector');

.load完成后

    function Create() {

            BootstrapDialog.show({
            title: "Add Resource",
            message: $('<div id="CreatePopup"></div>').load('@Url.Action("Create","Resource")'
            , function() {$.validator.unobtrusive.parse('#YourFormSelector');})
           });
            return false;
           }
相关问题