从局部视图一个模式内的数据传递到主视图，然后关闭模式 [英] Passing data from partial view inside a modal to the main view and then close the modal
问题描述
我这是在我的 Index.cshtml 文件中定义为以下按钮：
＆LT;按钮式=按钮级=BTN BTN-默认的数据切换=莫代尔数据目标=＃myModal＆GT;
添加值
＆LT; /按钮＆GT;
点击按钮会打开一个模式窗口。我的语气中定义的 Index.cshtml 文件，如下：
＆LT; DIV CLASS =模式变脸ID =myModal的tabindex = - 1角色=对话框中的咏叹调-labelledby =myModalLabel＆GT;
＆LT; DIV CLASS =模式，对话框的角色=文件＆GT;
＆LT; DIV CLASS =模式内容＆GT;
＆LT; DIV CLASS =模头＆GT;
＆LT;按钮式=按钮级=关闭数据解雇=莫代尔ARIA标签=关闭＆GT;＆LT;跨度ARIA隐藏=真＆GT;＆安培;倍;＆LT; / SPAN＆GT; ＆LT; /按钮＆GT;
＆LT; H4类=模式标题ID =myModalLabel＆gt;添加一个Value＆LT; / H4＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =模体＆GT;
@（Html.Kendo（）。TabStrip控件（）
。名称（标签栏）
.Items（TS =＆GT;
{ ts.Add（）文本（选择一个学校）选定（真）.LoadContentFrom（Url.Action（SchoolPartial，机构））。;
}）
）
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
下面是如何我部分的样子（ SchoolPartial.cshtml ）
＆LT; DIV CLASS =COL-MD-12＆GT; @（Html.Kendo（）。编辑器（）
。名称（schoolEditor）
.TAG（格）
.Tools（工具=＆GT;工具
。明确（）
.Bold（）。斜体（）。下划线（）。删除线（）
.JustifyLeft（）。中间对齐（）。证明右边（）。JustifyFull（）
.CreateLink（）。取消链接（）
.InsertImage（）
.TableEditing（）
.FontColor（）。背景色（）
）
.value的（@＆LT;文本＆GT;＆LT; P＆GT;
＆LT; DIV CLASS =集装箱液＆GT;
＆LT; DIV CLASS =行＆GT;
＆LT; DIV CLASS =COL-MD-4＆GT;高中＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / P＆GT;＆LT; /文本＆GT;））
＆LT; / DIV＆GT;
现在，用户点击添加值按钮在Index.cshtml文件，myModal窗口打开，并在myModal从选择一所学校'标签，它加载的SchoolPartial标签窗口，我希望用户能够点击'高中'DIV。当用户点击高中格中的 SchoolPartial.cshtml ，我要的 ID = 2 要传递给我的 Index.cshtml ，由它来从数据库中加载的学校名称和详细地址，并在 Index.cshtml 显示它。
我怎样才能实现这一行为。
谢谢！
编辑：
在我SchoolPartial.cshtml，使我的div点击，我围绕着我的div与锚标记象下面这样：
＆LT; A HREF =@ Url.Action（RetrieveSchoolDetails，学校，新{schoolId =2}）＆GT;
＆LT; DIV CLASS =COL-MD-4＆GT;高中＆LT; / DIV＆GT;
＆所述; / A＆GT;
下面学校是我的控制器（ SchoolController.cs ）和RetrieveSchoolDetails是操作方法。
这是怎么了定义RetrieveSchoolDetails方式：
公共无效RetrieveSchoolDetails（字符串schoolId = NULL）
{
VAR schoolDetail = db.School.Where（E =＆GT; e.SchoolId == schoolId）.ToList（）;
字符串地址= Convert.ToString（schoolDetail。选择（E =＆GT; e.Address））;
字符串名称= Convert.ToString（schoolDetail。选择（E =＆GT; e.Name））;
字符串学校=名称+地址; ViewBag.SchoolSelection =学校;
}
现在我想，一旦信息进入ViewBag，我想关闭模式窗口，从而使选择和ViewBag信息Index.cshtml显示出来。结果
我不知道，如何从控制器关闭我的引导模式，使之显示我Index.cshtml的数据。结果
或者可以只显示我的模式和用户可以手动关闭模式，使ViewBag信息仍然存在。当我跑我的项目，ViewBag分配值后，浏览器不断处理，我不能点击我的模式将其关闭。
请建议！
感谢
编辑2：
我编辑我的code和使用DIV点击呼叫javascript函数，然后用ajax进行调用控制器的方法 - RetrieveSchoolDetails并返回从控制器方法局部视图。
所有现在正在做的是，返回学校地址全屏幕的局部视图。即它重定向我到我与生成的学校地址局部视图。
不过，我想关闭模式，然后显示，我的父页面（Index.cshtml）内的局部视图。
下面是我的code additions-
DIV下面是SchoolPartial.cshtml
＆LT; DIV的onclick =的getAddress（'2'）级=COL-MD-4＆GT;高中＆LT; / DIV＆GT;
JavaScript函数
＆LT;脚本＆GT;
功能的getAddress（code）
{
$阿贾克斯（{
网址：'？/学校/ RetrieveSchoolDetails schoolID = 2，
的contentType：应用程序/ HTML;字符集= UTF-8，
输入：GET，
数据类型：HTML }）
.success（功能（结果）{
$（'＃npAddress'）HTML（结果）。 // npAddress是我的div里面的id
//Index.cshtml在这里我想显示的部分。
//这里我要关闭该模式窗口
//并显示在Index.cshtml它充满状态。
}）
.error（功能（XHR，状态）{
警报（状态）;
}）
};＆LT; / SCRIPT＆GT;
下面是我的控制器的方法：
公共无效RetrieveSchoolDetails（字符串schoolId = NULL）
{
VAR schoolDetail = db.School.Where（E =＆GT; e.SchoolId == schoolId）.ToList（）;
字符串地址= Convert.ToString（schoolDetail。选择（E =＆GT; e.Address））;
字符串名称= Convert.ToString（schoolDetail。选择（E =＆GT; e.Name））;
字符串学校=名称+地址; ViewBag.SchoolSelection =学校;
返回PartialView（_ schoolAddress）;
}
下面是我_schoolAddress.chtml部分
@ ViewBag.SchoolSelection
首先，你并不需要在这里使用谐音。使用谐音的目的是就摆在那里一些HTML code，需要在多个地方（不同页）被重用。通过将它放在一个部分，然后调用这部分从几页，你让你的项目更容易整理（任何修改只需要进行一次）。但是，谐音添加不建议初学者一定程度的复杂性。他们可以是强大的工具，但让我们从基础开始，然后逐渐上升到。
第二，我不会用剃刀上顶部的任何插件（例如剑道）。没有什么错误使用，但可以保持简单了。另外，剃须刀是pretty它自己的织补强大。
I codeD了一些东西给你，但你必须填补空白。
@model MyProject.Models.MyModel＆LT; DIV CLASS =＆GT;＆LT;按钮式=按钮级=BTN BTN-默认的数据切换=莫代尔的onclick =的AddValue（）＆GT;
添加值
＆LT; /按钮＆GT;＆LT; / DIV＆GT;
＆LT; DIV CLASS =模式变脸ID =myModal的tabindex = - 1角色=对话框中的咏叹调-labelledby =myModalLabel＆GT;
＆LT; DIV CLASS =模式，对话框的角色=文件＆GT;
＆LT; DIV CLASS =模式内容＆GT;
＆LT; DIV CLASS =模头＆GT;
＆LT;按钮式=按钮级=关闭数据解雇=莫代尔ARIA标签=关闭＆GT;＆LT;跨度ARIA隐藏=真＆GT;＆安培;倍;＆LT; / SPAN＆GT; ＆LT; /按钮＆GT;
＆LT; H4类=模式标题ID =myModalLabel＆gt;添加一个Value＆LT; / H4＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =模体＆GT;
＆LT;！ - 这里的一些标签？ - ＆GT;
＆LT;！ - 放code的标签在这里，不使用的部分 - ＆GT;
＆LT; DIV的onclick =的getAddress（2）级=COL-MD-4＆GT;高中＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT;脚本＆GT; 功能的AddValue（）
{
$（'myModal'）模态（）。 } 功能的getAddress（ID）
{
$阿贾克斯（
{
网址：'/学校/ RetrieveSchoolDetails schoolID？'+ ID，
的contentType：应用程序/ HTML;字符集= UTF-8，
输入：GET，
的contentType：应用/ JSON，
成功：函数（结果）{
$（'＃npAddress）文本（结果）。
}，
错误：功能（XHR，状态）{
警报（状态）;
}
}）; }
＆LT; / SCRIPT＆GT;
在你的控制器：
公共JsonResult RetrieveSchoolDetails（字符串schoolId）
{
//除非你打算以某种方式处理它这里不使用默认的空
//否则下一行会抛出一个错误
VAR schoolDetail = db.School.Where（E =＆GT; e.SchoolId == schoolId）.ToList（）;
字符串地址= Convert.ToString（schoolDetail。选择（E =＆GT; e.Address））;
字符串名称= Convert.ToString（schoolDetail。选择（E =＆GT; e.Name））;
字符串学校=名称+地址;
//可能需要这取决于你想回到什么格式
返回JSON（学校）;
}
记住，整个学习过程意味着简单的开始，然后建立要复杂的多。
I have a button which is defined as below in my Index.cshtml file:
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">
Add Value
</button>
Clicking on button opens a modal window. My modal is defined in Index.cshtml file as below:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Add a Value</h4>
</div>
<div class="modal-body">
@(Html.Kendo().TabStrip()
.Name("tabstrip")
.Items(ts =>
{
ts.Add().Text("Pick a school").Selected(true).LoadContentFrom(Url.Action("SchoolPartial", "Institution"));
})
)
</div>
</div>
</div>
Below is how my partial looks like (SchoolPartial.cshtml):
<div class="col-md-12">
@(Html.Kendo().Editor()
.Name("schoolEditor")
.Tag("div")
.Tools(tools => tools
.Clear()
.Bold().Italic().Underline().Strikethrough()
.JustifyLeft().JustifyCenter().JustifyRight().JustifyFull()
.CreateLink().Unlink()
.InsertImage()
.TableEditing()
.FontColor().BackColor()
)
.Value(@<text><p>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">Senior School</div>
</div>
</div>
</p></text>))
</div>
Now, a user clicks on 'Add Value' button in Index.cshtml file, 'myModal' window opens, And in 'myModal' window from 'Pick a school' tab, which loads the 'SchoolPartial' tab, I want user to be able to click on the 'Senior School' div. When user clicks on senior school div in SchoolPartial.cshtml, I want id = 2 to be passed to my Index.cshtml, which will then load the school name and address details from database and display it in Index.cshtml.
How can I achieve this behavior.
Thanks!
EDIT:
In my SchoolPartial.cshtml, to make my div clickable, I surrounded my div with anchor tag like below:
<a href="@Url.Action("RetrieveSchoolDetails", "School", new {schoolId= "2" })">
<div class="col-md-4">senior school</div>
</a>
Here School is my controller (SchoolController.cs) and RetrieveSchoolDetails is the action method.
This is how I am defining RetrieveSchoolDetails method:
public void RetrieveSchoolDetails (string schoolId= null)
{
var schoolDetail = db.School.Where(e => e.SchoolId== schoolId).ToList();
string Address = Convert.ToString(schoolDetail .Select(e => e.Address));
string Name = Convert.ToString(schoolDetail .Select(e => e.Name));
string School= Name + Address;
ViewBag.SchoolSelection = School;
}
Now I want, once information gets into ViewBag, I want to close the modal window, so that the selection and the ViewBag information shows up in Index.cshtml.
I am not sure, how to close my bootstrap modal from controller, so that it shows me the data in Index.cshtml.
Or may be just show me the modal and user can manually close the modal, so that ViewBag information is still there. When I run my project, after assigning value to ViewBag, the browser keeps on processing and I cannot click on my modal to close it.
Please suggest!
Thanks
EDIT 2:
I edited my code and used, div click to call javascript function, which is then using ajax to make call to controller's method - RetrieveSchoolDetails and returning partial view from that controller method.
All it is doing now is, returns a partial view with school address in full screen. i.e it is redirecting me to my partial view with the generated school address.
However I want to close the modal and then show that partial view inside of my parent page (Index.cshtml).
Below are my code additions-
Below div is in SchoolPartial.cshtml
<div onclick="GetAddress('2')" class="col-md-4">senior school</div>
JavaScript function
<script>
function GetAddress(code)
{
$.ajax({
url: '/School/RetrieveSchoolDetails?schoolID=2',
contentType: 'application/html; charset=utf-8',
type: 'GET',
dataType: 'html'
})
.success(function (result) {
$('#npAddress').html(result); //npAddress is id of my div inside
//Index.cshtml where I want to display the partial.
//Here I want to close the modal window
//and show Index.cshtml in it's filled state.
})
.error(function (xhr, status) {
alert(status);
})
};
</script>
Below is my controller method:
public void RetrieveSchoolDetails (string schoolId= null)
{
var schoolDetail = db.School.Where(e => e.SchoolId== schoolId).ToList();
string Address = Convert.ToString(schoolDetail .Select(e => e.Address));
string Name = Convert.ToString(schoolDetail .Select(e => e.Name));
string School= Name + Address;
ViewBag.SchoolSelection = School;
return PartialView("_schoolAddress");
}
Below is my _schoolAddress.chtml Partial
@ViewBag.SchoolSelection
First off, you don't really need to use partials here. The purpose of using partials is to put some html code in there which needs to be reused in multiple places (different pages). By putting it in one partial and then calling that partial from several pages you make your project easier to upkeep (any changes only need to be made once). But, partials add a degree of complexity that is not recommended for beginners. They can be powerful tools but lets start off with the basics and work up to that.
Second, I wouldn't use any other plugins on top of the razor (e.g. kendo). There is nothing wrong with using it but lets keep it simple for now. Plus, razor is pretty darn powerful on it's own.
I coded up some stuff for you but you'll have to fill in the gaps.
@model MyProject.Models.MyModel
<div class="">
<button type="button" class="btn btn-default" data-toggle="modal" onclick="AddValue()">
Add Value
</button>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Add a Value</h4>
</div>
<div class="modal-body">
<!-- some tabs here? -->
<!-- put code for tabs here, don't use a partial -->
<div onclick="GetAddress(2)" class="col-md-4">senior school</div>
</div>
</div>
</div>
</div>
<script>
function AddValue()
{
$('myModal').modal();
}
function GetAddress(id)
{
$.ajax(
{
url: '/School/RetrieveSchoolDetails?schoolID' + id,
contentType: 'application/html; charset=utf-8',
type: 'GET',
contentType: 'application/json',
success: function (result) {
$('#npAddress').text(result);
},
error: function (xhr, status) {
alert(status);
}
});
}
</script>
In your controller:
public JsonResult RetrieveSchoolDetails (string schoolId)
{
// don't use a default null here unless you plan on handling it somehow
// otherwise the next line would throw an error
var schoolDetail = db.School.Where(e => e.SchoolId== schoolId).ToList();
string Address = Convert.ToString(schoolDetail .Select(e => e.Address));
string Name = Convert.ToString(schoolDetail .Select(e => e.Name));
string School= Name + Address;
// may need to format this depending on exactly what you want to return
return Json(school);
}
Remember, the overall learning process means starting simple and then building up to the more complex.
这篇关于从局部视图一个模式内的数据传递到主视图，然后关闭模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
