【问题标题】:Modal form to edit row in a grid (ASP.NET MVC)在网格中编辑行的模态表单(ASP.NET MVC)
【发布时间】:2012-12-08 14:00:29
【问题描述】:

多年来,我一直在尝试在 flexigrid 中实现模态对话框编辑,但没有成功。

我从一个非常简单的例子开始:

http://mvc4beginner.com/Sample-Code/Insert-Update-Delete/Asp-.Net-MVC-Ajax-Insert-Update-Delete-Using-Flexigrid.html

我对这个示例进行了很多扩展,但遇到了障碍,我不知道如何实现所需的功能。

我实现了以下jquery函数:

函数 RunModalDialog(标题,网址) { $("#sform").dialog({ 自动打开:假, 显示:“盲”, closeOnEscape:真, 可调整大小:真, 宽度:1200, 身高:750, 最小高度:600, 最小宽度:950 }); 如果(标题) $("#sform").dialog("option", "title", title); 如果(网址) $("#sform").load(url).dialog("open"); 别的 $("#sform").dialog("open");

我从添加按钮(不带 url)和编辑按钮(带 url)调用它。

Add 可以正常工作(虽然我还没有实现实际的保存和网格刷新),但我不能让它在 Edit 上工作。

这是我的主视图代码

@model CardNumbers.Objects.Client

@{
    ViewBag.Title = "Clients";
}

@section scripts {
    <script src="@Url.Content("~/Scripts/Clients.js")" type="text/javascript" ></script>
}

<form id="frmClientsSearch">
    <label for="clientNo">Client No: </label>
    <input type="number" name="searchClientNo" class="numericOnly" /><br />
    <label for="clientName">Client Name: </label>
    <input type="text" size="25" value="Please enter the search value" class="SelectOnEntry"
        name="searchClientName" />

    <input type="button" id="btnClientsSearch" value="Find / Refresh" />
</form>
<div style="padding-left: 150px; padding-top: 50px; padding-bottom: 50px;" id="ClientsResults">
    <table id="flexClients" style="display: none">
    </table>
</div>

<div id="editor" style ="visibility :hidden ">
      @using (Html.BeginForm(null, null, FormMethod.Post, new { id = "sform", title = "Client Info" }))
     { 
        @Html.Partial("_ClientForm", Model)   
      }      
</div>

客户端控制器的 Edit 方法返回一个视图

@model CardNumbers.Objects.Client @{ ViewBag.Title = "编辑客户端"; 布局 = "~/Views/Shared/_PopupLayout.cshtml"; } @Html.Partial("_ClientForm", 模型) @section 脚本 { @Scripts.Render("~/bundles/jqueryval") }

我最初在 _ClientForm 中有 BeginForm,我可以看到该表单,但 x(关闭)和 Resize 不起作用。我现在尝试将开始表单的行移到外面,但现在行为更糟。

你能告诉我这应该如何工作吗?

【问题讨论】:

  • 进行编辑时,URL 中的内容是否加载到#sform 中?有点需要告诉你在哪里遇到了麻烦
  • 我将在我的问题中添加更多内容,以提供我的主视图代码和控制器的 Edit 方法。请过几分钟再检查我的问题
  • 有没有办法添加我看到的行为的图像?

标签: jquery asp.net-mvc jquery-ui


【解决方案1】:

我能想到的两件事是

  1. 检查网址是否有效,

  2. div 填满后调用对话框

    $("#sform").load(url).dialog("open");

变成

    $("#sform").load(url, function(){
       $("#sform").dialog("open");
    });

如果提供了“完成”回调,则在后处理和 HTML 插入完成后执行。

注意这是在修改之前对问题的建议答案

【讨论】:

  • 我认为作为一个初学者我仍然不完全理解所有这些应该如何工作。我希望我可以插入一张图片,其中包含我使用您的建议更改代码时遇到的错误
  • 错误现在是ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js0x800a139e 中第 2 行第 13143 列的未处理异常 - Microsoft JScript 运行时错误:无法在初始化之前调用对话框上的方法;试图调用方法'open'
  • 这告诉我 #sform 在脚本运行时不存在。要么包装在 $(document).ready 中,要么将脚本移动到 #sform 下面
  • #sForm 在主视图中。它也应该在编辑视图中吗?我在客户端视图的底部
    @using (Html.BeginForm(null, null, FormMethod.Post, new { id = "sform", title = "客户信息" })) { @Html.Partial("_ClientForm", Model) }
  • 我还添加了更多内容,就像我现在拥有的一样。我有一个主视图,我在其中定义了#sForm(在不可见的 div 中)。在编辑按钮中,我尝试返回一个视图。如果我返回一个包含#sForm 的视图,它似乎根本不起作用。但我在想 - 可能我只需要将它包装在表单语句中(但没有 id)?
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-04-07
  • 2011-01-04
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多