我需要在多对多模式对话框中保留状态渐进增强 http://en.wikipedia.org/wiki/Progressive_enhancementASP.NET MVC 项目中的方式。
在我的代码中,当禁用 javascript 时,模式对话框将导航到另一个页面并返回,但是当启用 javascript 时,对话框将作为 jquery 模式对话框打开,就可以了。
我在用着this https://stackoverflow.com/questions/442704/how-do-you-handle-multiple-submit-buttons-in-asp-net-mvc-framework/7111222#7111222从单击视图中选择操作的方法。
下面的代码显示了一个母版页调用详细信息页,有视图和控制器。只有一个主控调用一个详细信息对话框,但我有另一个视图/控制器,其中一个主控可以调用许多不同的详细信息对话框,有时一个对话框可以像母版页一样运行并调用嵌套的另一个对话框。一切都必须在调用之间保持状态。
问题是它非常复杂,有很多代码来保持状态和管理对话框,我需要在各处重复相同的 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);
}
//-------
}
}
//######################################################################
VIEW
@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>