Asp.net mvc MVC#模式弹出窗口
好的,我正试图找出如何根据这篇文章的建议,正确地使用控制器调用我的页面的模式弹出窗口 有点像这样: 我有一个视图有一个下拉列表,如果用户找不到他/她正在寻找的项目/值,他/她可以建议一个值(建议新值链接),该值应该调用控制器并返回一个带有几个字段的弹出页面 以下是视图中的对象:Asp.net mvc MVC#模式弹出窗口,asp.net-mvc,jquery,modal-dialog,jquery-dialog,Asp.net Mvc,Jquery,Modal Dialog,Jquery Dialog,好的,我正试图找出如何根据这篇文章的建议,正确地使用控制器调用我的页面的模式弹出窗口 有点像这样: 我有一个视图有一个下拉列表,如果用户找不到他/她正在寻找的项目/值,他/她可以建议一个值(建议新值链接),该值应该调用控制器并返回一个带有几个字段的弹出页面 以下是视图中的对象: <script type="text/javascript"> loadpopup = function () { window.showModalDialog(‘
<script type="text/javascript">
loadpopup = function ()
{
window.showModalDialog(‘/NewValue/New′ , "loadPopUp", ‘width=100,height=100′);
}
</script>
<%: Html.DropDownList(model => model.ValueId, new selectlist........... %>
<%: Html.ActionLink("Suggest Value", "New", "NewValue", null, new { onclick = 'loadpopup()') %>
现在我被卡住了。我想返回一个可以格式化的页面,我必须返回一个字符串吗?我不能返回一个aspx(我使用的引擎),因为格式化会更容易吗
任何关于我应该走哪个方向的建议都非常感谢
谢谢 您可以使用用于弹出窗口的。让我们在这里进行一个小的设置
我们将为主窗体提供一个视图模型:
public class MyViewModel
{
public string ValueId { get; set; }
public IEnumerable<SelectListItem> Values
{
get
{
return new[]
{
new SelectListItem { Value = "1", Text = "item 1" },
new SelectListItem { Value = "2", Text = "item 2" },
new SelectListItem { Value = "3", Text = "item 3" },
};
}
}
public string NewValue { get; set; }
}
和一个视图(~/Views/Home/Index.aspx
):
控制器:
public class HomeController : Controller
{
public ActionResult Index()
{
return View(new MyViewModel());
}
[HttpPost]
public ActionResult Index(MyViewModel model)
{
return Content("thanks for submitting");
}
}
public class NewValueController : Controller
{
public ActionResult New()
{
return PartialView(new NewValueViewModel());
}
[HttpPost]
public ActionResult New(NewValueViewModel model)
{
var newValue = string.Format("{0} - {1}", model.Foo, model.Bar);
return Json(new { newValue = newValue });
}
}
以及相应的局部视图(~/Views/NewValue/New.ascx
):
我试过了,但是atm并没有弹出,而是打开了一个新的页面。我想知道jquery的哪一部分触发了模式?它是对链接的
事件的订阅。确保您已经正确地包含了所有3个javascript文件(jquery-1.5.1.min.js
、jquery-ui-1.8.11.js
和my.js
——包含我按该顺序显示的脚本),并且javascript控制台中没有错误。看到了问题,这是因为额外的“});'英雄联盟再次感谢!顺便说一句,很抱歉有后续问题。但是,我想用我添加的新值更新x.ValueId,Model.Values)%>是否返回Json(New{newValue=newValue});处理好了吗?很奇怪,它将如何成为下拉列表的selectlistitem。您可以在成功处理程序中向下拉列表添加一个新的
项,而不是设置NewValue字段。
<%@ Page
Language="C#"
MasterPageFile="~/Views/Shared/Site.Master"
Inherits="System.Web.Mvc.ViewPage<AppName.Models.MyViewModel>"
%>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<% using (Html.BeginForm()) { %>
<%= Html.DropDownListFor(x => x.ValueId, Model.Values) %>
<br/>
<%= Html.EditorFor(x => x.NewValue) %>
<%= Html.ActionLink("Suggest Value", "New", "NewValue", null, new { id = "new-value-link" }) %>
<button type="submit">OK</button>
<% } %>
<div id="dialog"></div>
</asp:Content>
public class NewValueViewModel
{
public string Foo { get; set; }
public string Bar { get; set; }
}
public class NewValueController : Controller
{
public ActionResult New()
{
return PartialView(new NewValueViewModel());
}
[HttpPost]
public ActionResult New(NewValueViewModel model)
{
var newValue = string.Format("{0} - {1}", model.Foo, model.Bar);
return Json(new { newValue = newValue });
}
}
<%@ Control
Language="C#"
Inherits="System.Web.Mvc.ViewUserControl<AppName.Models.NewValueViewModel>"
%>
<% using (Html.BeginForm(null, null, FormMethod.Post, new { id = "new-value-form" })) { %>
<%= Html.EditorFor(x => x.Foo) %>
<%= Html.EditorFor(x => x.Bar) %>
<button type="submit">OK</button>
<% } %>
<script src="<%: Url.Content("~/Scripts/jquery-1.5.1.min.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery-ui-1.8.11.js") %>" type="text/javascript"></script>
$(function () {
$('#new-value-link').click(function () {
var href = this.href;
$('#dialog').dialog({
modal: true,
open: function (event, ui) {
$(this).load(href, function (result) {
$('#new-value-form').submit(function () {
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (json) {
$('#dialog').dialog('close');
$('#NewValue').val(json.newValue);
}
});
return false;
});
});
}
});
return false;
});
});
$('#CheckGtd').click(function () {
if ($(this).is(":checked"))
$("#tbValuationDate").attr("disabled", false);
else
$("#tbValuationDate").attr("disabled", "disabled");
});