在使用jquery UI模式时无法显示编辑表单 [英] Unable to Display Edit form in using jquery UI modal

问题描述

我正在尝试使用jquery UI模式显示我的编辑表单，显然我能够显示模态但没有控件显示我的意思是空白模态是开放的。

有人能指出我做出的错误或建议让它变得更好吗？



以下是我打开的脚本模态

 $（ function （）{
 $（' ＃modalLink'）。点击（ function （）{
 $（' ＃dialog'）。load（此 .href，函数（）{
 $（此）。对话框（{
 show：{
 effect：  blind，
持续时间：  1000  
}，
隐藏：{
效果： < span class =code-string> blind，
 duration： 1000  
}，
 width：< span class =code-digit> 600  
}）; 
 bindForm（ this ）; 
}）; 
  return   false ; 
}）; 
 
 $（'  .edit'）。click（ function （）{
 $（' ＃dialog'）。load（ this  .href， function （）{
 $（ this ）。dialog（{
 show：{
 effect：  blind，
持续时间： 1000  
}，
隐藏：{
效果：  blind，
持续时间： 1000  
}，
宽度： 600  
}）; 
 bindForm（此）; 
}）; 
  return   false ; 
}）; 
}）; 
 
 
 
 
  function  bindForm（对话框）{
 $（'  form'，dialog）.submit（ function （） {
 $ .ajax（{
 url：此 .action，
类型：这个 .method，
数据：$（这个）。serialize（），
成功：功能（结果）{
  if （result.success）{
  //   alert（'感谢提交'）;  
  //   $（'＃dialog'）。dialog（'close'）;  
 
  //  重定向到员工类型的索引页 
  window 。 location  = result。网址; 
}  else  {
 $（'  #dialog'）HTML（结果）; 
 bindForm（）; 
} 
} 
}）; 
  return   false ; 
}）; 
} 

这是我的索引页

< pre lang =text> @ model IEnumerable< PayrollSystem.Models.ViewModels.EmployeeTypeListViewModel>

@ {
ViewBag.Title =EmployeeTypes;
}

< script src =〜/ Scripts / Employee / EmployeeType.js>< / script>


< h2> EmployeeTypes< / h2>

< p>
< p>
@ Html.ActionLink（New，NewEmployeeType，Employee，null，new {id =modalLink}）
< div id =dialog>< / div> ;
< / p>
< / p>
< table class =table>
< tr>
< th>
@ Html.DisplayNameFor（model => model.Name）
< / th>
< th>< / th>
< / tr>

@foreach（模型中的var项目）{
< tr>
< td>
@ Html.DisplayFor（modelItem => item.Name）
< / td>
< td>
@ Html.ActionLink（编辑，EditEmployeeType，新{id = item.Id}，新{@class =edit}）|
@ Html.ActionLink（详细信息，详细信息，新{id = item.Id}）|
@ Html.ActionLink（删除，删除，新{id = item.Id}）
< / td>
< / tr>
}
< / table>

，以下是我的编辑部分页面

 @ model PayrollSystem.Models.ViewModels.EmployeeTypeEditViewModel 
 
 
 @using（Html.BeginForm（））
 {
 @ Html.AntiForgeryToken（）
 
< div class =form-horizo​​ntal> 
< h4> EmployeeTypeEditViewModel< / h4> 
< hr /> 
 @ Html.ValidationSummary（true）
 @ Html.HiddenFor（model => model.Id）
 
< div class =form-group> 
 @ Html.LabelFor（model => model.Name，new {@class =control-label col-md-2}）
< div class =col-md-10 > 
 @ Html.EditorFor（model => model.Name）
 @ Html.ValidationMessageFor（model => model.Name）
< / div> 
< / div> 
 
< div class =form-group> 
< div class =col-md-offset-2 col-md-10> 
< input type =submitvalue =Saveclass =btn btn-default/> 
< / div> 
< / div> 
< / div> 
} 
 
< div> 
 @ Html.ActionLink（返回列表，索引）
< / div> 
 
 @section脚本{
 @ Scripts.Render（〜/ bundles / jqueryval）
} 

如果这里也是我的控制器

  public  ActionResult EditEmployeeType（ int  id）
 {
  var  employeeType = _db .EmployeeTypes.Find（ID）; 
  if （employeeType ==  null ）
 返回 HttpNotFound（）; 
  var  editEmployee =  new  EmployeeTypeEditViewModel 
 {
 Id = employeeType。 Id，
 Name = employeeType.Name 
}; 
  return  PartialView（editEmployee）; 
} 
 
 [HttpPost] 
  public  ActionResult EditEmployeeType（EmployeeTypeEditViewModel model）
 {
  //  检查员工类型是否已存在 
  var  exists = _db.EmployeeTypes.Any（c = >  c.Name.ToLower（）== model.Name.ToLower（）&& ; c.Id！= model.Id）; 
 
  if （存在）
 {
 ModelState.AddModelError（  名称， 员工类型已存在！）; 
} 
 
  if （！ModelState.IsValid）
 {
 返回 PartialView（模型）; 
} 
 
  var  employeeType = _db.EmployeeTypes.Find（model.Id）; 
  if （employeeType ==  null ）
 返回 HttpNotFound（）; 
 
 _db.Entry（employeeType）.State = System.Data.Entity.EntityState.Modified; 
 _db.SaveChanges（）; 
 
  //   TODO：模型有效=>用它做一些处理 
  //  并返回确认成功的JSON结果 
  return  Json（ new  {success =  true ，url = Url.Action（  EmployeeTypes）}）; 
} 

谢谢和提前，

Dan

解决方案

（ function （）{

（' ＃modalLink'）。点击（ function （）{

（' ＃dialog'）。load（ this .href， function （）{

Hi,

I'm trying to display my edit form using jquery UI modal, apparently I was able to display the modal but no control is showingI mean blank modal is being open.
Can anyone point what mistake did I make or suggestion to make it better?

Below is my script for opening the modal

$(function () {
    $('#modalLink').click(function () {
        $('#dialog').load(this.href, function () {
            $(this).dialog({
                show: {
                    effect: "blind",
                    duration: 1000
                },
                hide: {
                    effect: "blind",
                    duration: 1000
                },
                width: 600
            });
            bindForm(this);
        });
        return false;
    });

    $('.edit').click(function () {
        $('#dialog').load(this.href, function () {
            $(this).dialog({
                show: {
                    effect: "blind",
                    duration: 1000
                },
                hide: {
                    effect: "blind",
                    duration: 1000
                },
                width: 600
            });
            bindForm(this);
        });
        return false;
    });
});




function bindForm(dialog) {
    $('form', dialog).submit(function () {
        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function (result) {
                if (result.success) {
                    //alert('thanks for submitting');
                    //$('#dialog').dialog('close');
                    
                    //Redirect to index page of employee types
                    window.location = result.url;
                } else {
                    $('#dialog').html(result);
                    bindForm();
                }
            }
        });
        return false;
    });
}

Here is my index page

@model IEnumerable<PayrollSystem.Models.ViewModels.EmployeeTypeListViewModel>

@{
    ViewBag.Title = "EmployeeTypes";
}

<script src="~/Scripts/Employee/EmployeeType.js"></script>


<h2>EmployeeTypes</h2>

<p>
    <p>
    @Html.ActionLink("New", "NewEmployeeType", "Employee", null, new { id = "modalLink" })
    <div id="dialog"></div>
</p>
</p>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            @Html.ActionLink("Edit", "EditEmployeeType", new { id = item.Id }, new { @class = "edit" }) |
            @Html.ActionLink("Details", "Details", new { id=item.Id }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.Id })
        </td>
    </tr>
}
</table>

and last below is my Edit Partial page

@model PayrollSystem.Models.ViewModels.EmployeeTypeEditViewModel


@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    
    <div class="form-horizontal">
        <h4>EmployeeTypeEditViewModel</h4>
        <hr />
        @Html.ValidationSummary(true)
        @Html.HiddenFor(model => model.Id)

        <div class="form-group">
            @Html.LabelFor(model => model.Name, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Name)
                @Html.ValidationMessageFor(model => model.Name)
            </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.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

In case here also is my controller

public ActionResult EditEmployeeType(int id)
        {
            var employeeType = _db.EmployeeTypes.Find(id);
            if (employeeType == null)
                return HttpNotFound();
            var editEmployee = new EmployeeTypeEditViewModel
            {
                Id = employeeType.Id,
                Name = employeeType.Name
            };
            return PartialView(editEmployee);
        }

        [HttpPost]
        public ActionResult EditEmployeeType(EmployeeTypeEditViewModel model)
        {
            //Check if employee type already exist
            var exist = _db.EmployeeTypes.Any(c => c.Name.ToLower() == model.Name.ToLower() && c.Id!=model.Id);

            if (exist)
            {
                ModelState.AddModelError("Name", "Employee type already exist!");
            }

            if (!ModelState.IsValid)
            {
                return PartialView(model);
            }

            var employeeType = _db.EmployeeTypes.Find(model.Id);
            if (employeeType == null)
                return HttpNotFound();

            _db.Entry(employeeType).State = System.Data.Entity.EntityState.Modified;
            _db.SaveChanges();

            // TODO: the model is valid => do some processing with it
            // and return a JSON result confirming the success
            return Json(new { success = true, url = Url.Action("EmployeeTypes") });
        }

Thanks and advance,
Dan

解决方案

(function () {

('#modalLink').click(function () {

('#dialog').load(this.href, function () {

这篇关于在使用jquery UI模式时无法显示编辑表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！