【问题标题】:How to simplify my statefull interlaced modal dialogs in ASP.NET MVC如何在 ASP.NET MVC 中简化我的全状态交错模式对话框
【发布时间】:2012-01-22 10:21:35
【问题描述】:

我需要在 ASP.NET MVC 项目中以progressive enhancement 方式保持多对多模式对话框的状态。
在我的代码中,当 javascript 被禁用时,模态对话框打开导航到另一个页面并返回,但是当 javascript 被启用时,对话框作为 jquery 模态对话框打开,它可以。
我使用this 方法从点击视图中选择操作。
下面的代码显示了一个主页面调用详细页面,有视图和控制器。只有一个主控调用一个详细对话框,但我有另一个视图/控制器,其中一个主控可以调用许多不同的详细对话框,有时一个对话框的行为类似于母版页并调用嵌套的另一个对话框。一切都必须在调用之间保持状态。

问题是它非常复杂,有很多代码来保持状态和管理对话框,我需要到处重复相同的 javascript 和控制器代码,我希望有一些方法来简化它。
在视图方面需要将通用脚本移至单独的 .js 文件并保持查看最少的 javascript。
在控制器方面,我搜索了很多通用方法来执行此操作,例如过滤器或自定义活页夹,但找不到。

控制器

//######################################################################  
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using HYW.Models;
using HYW.Helpers;

namespace HYW.Controllers
{
    public class TesteController : Controller
    {
        //-------
        private object getValue(string key)
        {
            return Session[key];
        }
        private void setValue(string key, object value)
        {
            Session[key] = value;
            if (value == null) { Session.Remove(key); }
        }
        //-------
        [AcceptVerbs(HttpVerbs.Get)]
        public ActionResult createitem()
        {
            setValue("item", null);
            setValue("detail", null);
            return View("item");
        }
        //-------
        [HttpPost]
        [ValidateAntiForgeryToken]
        [HlpFltButtonSelector(Name = "action", Argument = "saveitem")]
        public ActionResult saveitem(testePg01 model)
        {
            ModelState.Clear();
            return View("item", model);
        }
        //-------
        [HttpGet]
        public ActionResult opendialog()
        {
            ModelState.Clear();            
            testePg02 p2 = (testePg02)getValue("detail");
            if (p2 == null) { p2 = new testePg02(); }
            return View("detail", p2);
        }
        //-------
        [HttpPost]
        [ValidateAntiForgeryToken]
        [HlpFltButtonSelector(Name = "action", Argument = "opendialog")]
        public ActionResult opendialog(testePg01 model)
        {
            ModelState.Clear();
            setValue("item", model);
            testePg02 p2 = (testePg02)getValue("detail");
            if (p2 == null) { p2 = new testePg02(); }            
            return View("detail", p2);
        }
        //-------
        [HttpPost]
        [ValidateAntiForgeryToken]
        [HlpFltButtonSelector(Name = "action", Argument = "savedialog")]
        public ActionResult savedialog(testePg02 model)
        {
            ModelState.Clear();
            setValue("detail", model);
            testePg01 p1 = (testePg01)getValue("item");            
            if (p1 == null) { p1 = new testePg01(); }
            p1.p02 = model;            
            return View("item", p1);
        }
        //-------
        [HttpPost]
        [ValidateAntiForgeryToken]
        [HlpFltButtonSelector(Name = "action", Argument = "canceldialog")]
        public ActionResult canceldialog(testePg02 model)
        {
            ModelState.Clear();
            testePg01 p1 = (testePg01)getValue("item");
            setValue("detail", null);
            if (p1 == null) { p1 = new testePg01(); }
            p1.p02 = null;
            return View("item", p1);
        }
        //-------
    }
}
//######################################################################  

查看

@model HYW.Models.testePg01
@{
    ViewBag.Title = "ITEM";
}
<script type="text/javascript">
    //-------------------------------------------------
    var url_trg = '@Url.Content("~/Teste/opendialog")';
    var url_prl = '@Url.Content("~/Images/waitplease.gif")';
    //-------------------------------------------------
    function onloadpartial() {
        configDetailDialog(url_trg, "#tempcontent", "section[id='main']", "Detail", "#opendialog");
    }
    //-------------------------------------------------
    function configDetailDialog(trgurl, containerselector, contentselector, dlgtitle, buttonselector) {
        //-------
        $(document).ajaxError(
            function (event, jqXHR, ajaxSettings, thrownError) {
                alert('[event:' + event + '], ' +
                        '[jqXHR:' + jqXHR + '], ' +
                        '[jqXHR_STATUS:' + jqXHR.status + '], ' + 
                        '[ajaxSettings:' + ajaxSettings + '], ' +
                        '[thrownError:' + thrownError + '])');
            });
        //-------
        $.ajaxSetup({ cache: false });
        //-------
        $(buttonselector).click(function (event) {
            event.preventDefault();
            openAjaxDialog(trgurl, containerselector, contentselector, dlgtitle);
        });
        //-------
    }
    //-------------------------------------------------
    function openAjaxDialog(trgurl, containerselector, contentselector, dlgtitle) {
        $.ajax({
            type: 'GET',
            url: trgurl,
            context: document.body,
            success: function (data) {
                var dlg = $(data).find(contentselector);
                $('#dlgdetail').remove();
                $(containerselector).append("<div id='dlgdetail'/>");
                $('#dlgdetail').append(dlg);
                $('#dlgdetail')
                    .css("border", "solid")
                    .dialog({
                        autoOpen: true,
                        modal: true,
                        title: dlgtitle,
                        open: function () {
                            configDetailDialog();
                        },
                        close: function (event, ui) {
                            $('#dlgdetail').remove();
                        }
                    })
                    .find("form").submit(function (event) {
                        alert('clicou ' + event);
                        var form = $(this);
                        var faction = "http://" + window.location.host + trgurl;
                        var fdata = form.serialize() + "&action:savedialog=savedialog";
                        $.ajax({                            
                            type: "POST",
                            url: faction,
                            data: fdata,
                            success: function (result) {
                                alert(result);
                            }
                        });
                        event.preventDefault();
                        $('#dlgdetail').dialog('close');
                    });
            }
        });
    }
    //-------------------------------------------------
</script>
<div id='tempcontent'>
</div>
<div id="formcontent">
    @Html.ValidationSummary(true, "Erro na pagina.")
    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()
        <div>
            <fieldset>
                <legend>Item</legend>
                <div class="editor-label">
                    @Html.LabelFor(m => m.p01campo01)
                </div>
                <div class="editor-field">
                    @Html.TextBoxFor(m => m.p01campo01)
                    @Html.ValidationMessageFor(m => m.p01campo01)
                </div>
                <div class="editor-label">
                    @Html.LabelFor(m => m.p01campo02)
                </div>
                <div class="editor-field">
                    @Html.TextBoxFor(m => m.p01campo02)
                    @Html.ValidationMessageFor(m => m.p01campo02)
                </div>
                <p>
                    <input type="submit" style="background: #ffffff url('@Url.Content("~/Images/img01.png")')" value="opendialog" name="action:opendialog" id="opendialog" />
                    <input type="submit" style="background: #ffffff url('@Url.Content("~/Images/img02.png")')" value="saveitem" name="action:saveitem" id="action:saveitem" />
                </p>
            </fieldset>
        </div>
    }
</div>

【问题讨论】:

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


【解决方案1】:

没有人真的想在这里帮助你哈哈!
有人 here 在 google 代码上找到了一个名为 jqgrid-for-plsql 的应用程序,它可以帮助您提供一些想法。
有人here 告诉您可以使用它找到的一些问题。
让 jqgrid 在视图方面为您完成所有工作,忘记 javascript 的独立性。
jqGrid 是免费的,可以自动创建带有分页、内联 CRUD、元数据生成的模态表单 CRUD、嵌套网格、支持网格和版本中的 FK 文件的网格。
有人 here 正在讲述另一个名为 aspnetawesome 的库。
有人 here 正在讲述这些上下文中的验证。

【讨论】:

  • 嗨,谢谢,我失去了希望有人看到它并写了一些东西。现在我忘记了 javascript 的独立性,我全靠手写。
猜你喜欢
  • 2016-10-10
  • 2014-06-26
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2010-10-27
  • 2010-11-30
  • 1970-01-01
相关资源
最近更新 更多