如何在选项卡中调用Patial View [英] How to Call Patial View In Tab
问题描述
您好，
我有索引页面，其中包含JavaScript标签，在标签页面中我有部分视图。
一旦用户点击选项卡，它将调用部分视图，因此这个局部视图有一些搜索条件，所以一旦用户选择标准并搜索resutl我想在PartialView中调用另一个局部视图我已经tred但它将呈现为下一个页面出了什么问题我不知道。
我的索引页面在这里..
Hello,
I have Index page which contain JavaScript Tab and inside the Tab I have a Partial View.
once user click on tab it will call partial view so this partial view has some searching criteria so once user select criteria and search resutl I want to call another partial view inside the PartialView I had tred but it will render as next page what is goes wrong I dont know.
My Index page is here..
@{
ViewBag.Title = "Home Page";
}
<section class="featured">
<div id="tabs">
<ul>
<li><a href="/Home/GetResidentialTab">Residential</a></li>
<li><a href="#tabs-2">New Project</a></li>
<li><a href="#tabs-3">Commercial</a></li>
</ul>
<div id="tabs-2">
Content for Tab 2 goes here.<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="tabs-3">
Content for Tab 3 goes here.<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
</section>
<script type="text/javascript">
$(function () {
$("#tabs").tabs();
});
</script>
现在一旦用户点击住宅，GetResidentialTab局部视图将呈现，它就在这里..
now Once user click on residential the GetResidentialTab partial view will render and it is here..
@model BuldertTrackerWeb.Models.ResidentialSearchModels
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
@*@using (Html.BeginForm("GetSelectedRadioButton", "Home"))*@
@using (Ajax.BeginForm("GetSelectedRadioButton",
new AjaxOptions{
HttpMethod="get",
InsertionMode= InsertionMode.Replace,
UpdateTargetId = "SearchListMatching"
}))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
foreach (BuldertTrackerWeb.ViewModels.RadioButtonItem item in Model.RadioButtonView.RadioButtonList)
{
@Html.DisplayFor(i => item.Name)
@Html.RadioButton("ResidentialSearchModels.RadioButtonViewModel.SelectedRadioButton", item.Name, item.Selected, new { @style = "width: 40px;" })
}
<fieldset>
<legend>ResidentialSearchModels</legend>
<div class="editor-field">
@Html.DropDownListFor(model => model.PropertyType, new SelectList(Model.PropertyTypes, "ID", "Name"), "-Select PropertyType-", new { @style = "width: 200px;height:30px" })
@Html.DropDownListFor(model => model.City, new SelectList(Model.Cities, "ID", "Name"), "-Select City-", new { @style = "width: 200px;height:30px" })
@Html.TextBoxFor(model => model.SearchTag,new { placeholder = "Project, Builder, Locality..." })
</div>
<div class="editor-field">
@Html.DropDownListFor(model => model.MinPrice, new SelectList(Model.MinPrices, "ID", "Name"), "-Select MinValue-", new { @style = "width: 180px;height:30px" })
@Html.DropDownListFor(model => model.MaxPrice, new SelectList(Model.MaxPrices, "ID", "Name"), "-Select MaxValue-", new { @style = "width: 180px;height:30px" })
@Html.DropDownListFor(model => model.Bedroom, new SelectList(Model.Bedrooms, "ID", "Name"), "-Select Bedroom-", new { @style = "width: 180px;height:30px" })
@Html.DropDownListFor(model => model.PostedBy, new SelectList(Model.PostedBys, "ID", "Name"), "-Select PostedBy-", new { @style = "width: 180px;height:30px" })
</div>
<p>
<input type="submit" value="Search" />
</p>
</fieldset>
}
现在用户点击搜索按钮会得到一些结果和这个结果我想作为部分视图呈现为& quot; GetResidentialTab& quot;局部视图我如何渲染这个...
甚至我的_ListView在这里也是部分视图...
now user click on Search button it will get some result and this result I want to render as partial view into "GetResidentialTab" partial view how I can render this..
even my _ListView is partilview here...
@model BuldertTrackerWeb.Models.ResidentialSearchModels
<div id="SearchListMatching">
@using (Html.BeginForm())
{
if (Model.residentialListView != null)
{
<ul>
@foreach (var item in Model.residentialListView)
{
<li>
<a href="@Url.Action("Details", new { id = item.Id })">
<img alt="@item.Title" src="@item.Url" />
<span>@item.Detail</span>
</a>
</li>
}
</ul>
}
}
</div>
我不知道怎么打电话我在Controll里面打电话就像
I have no Idea how to call I am calling it inside the Controll like
public ActionResult GetSelectedRadioButton(ResidentialSearchModels model)
{
//var SelectedRadioButton = model.RadioButtonView.SelectedRadioButton;
//Do something according to the selected value
model.residentialListView = new List<ResidentialListViewModels>()
{
new ResidentialListViewModels(){Id =1, Url="", Detail="Sample 1", Title="Title 1"},
new ResidentialListViewModels(){Id =2, Url="", Detail="Sample 2", Title="Title 2"},
new ResidentialListViewModels(){Id =3, Url="", Detail="Sample 3", Title="Title 3"},
new ResidentialListViewModels(){Id =4, Url="", Detail="Sample 4", Title="Title 4"},
new ResidentialListViewModels(){Id =5, Url="", Detail="Sample 5", Title="Title 5"},
};
return PartialView("~/Views/Shared/_ListView.cshtml", model);
}
但它不起作用......？
but it will not working...??
推荐答案
（function（）{
(function () {
（ < span class =code-string>＃tabs）。tabs（）;
}）;
< / script >
("#tabs").tabs(); }); </script>
现在一旦用户点击住宅，GetResidentialTab局部视图将呈现，它就在这里..
now Once user click on residential the GetResidentialTab partial view will render and it is here..
@model BuldertTrackerWeb.Models.ResidentialSearchModels
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
@*@using (Html.BeginForm("GetSelectedRadioButton", "Home"))*@
@using (Ajax.BeginForm("GetSelectedRadioButton",
new AjaxOptions{
HttpMethod="get",
InsertionMode= InsertionMode.Replace,
UpdateTargetId = "SearchListMatching"
}))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
foreach (BuldertTrackerWeb.ViewModels.RadioButtonItem item in Model.RadioButtonView.RadioButtonList)
{
@Html.DisplayFor(i => item.Name)
@Html.RadioButton("ResidentialSearchModels.RadioButtonViewModel.SelectedRadioButton", item.Name, item.Selected, new { @style = "width: 40px;" })
}
<fieldset>
<legend>ResidentialSearchModels</legend>
<div class="editor-field">
@Html.DropDownListFor(model => model.PropertyType, new SelectList(Model.PropertyTypes, "ID", "Name"), "-Select PropertyType-", new { @style = "width: 200px;height:30px" })
@Html.DropDownListFor(model => model.City, new SelectList(Model.Cities, "ID", "Name"), "-Select City-", new { @style = "width: 200px;height:30px" })
@Html.TextBoxFor(model => model.SearchTag,new { placeholder = "Project, Builder, Locality..." })
</div>
<div class="editor-field">
@Html.DropDownListFor(model => model.MinPrice, new SelectList(Model.MinPrices, "ID", "Name"), "-Select MinValue-", new { @style = "width: 180px;height:30px" })
@Html.DropDownListFor(model => model.MaxPrice, new SelectList(Model.MaxPrices, "ID", "Name"), "-Select MaxValue-", new { @style = "width: 180px;height:30px" })
@Html.DropDownListFor(model => model.Bedroom, new SelectList(Model.Bedrooms, "ID", "Name"), "-Select Bedroom-", new { @style = "width: 180px;height:30px" })
@Html.DropDownListFor(model => model.PostedBy, new SelectList(Model.PostedBys, "ID", "Name"), "-Select PostedBy-", new { @style = "width: 180px;height:30px" })
</div>
<p>
<input type="submit" value="Search" />
</p>
</fieldset>
}
现在用户点击搜索按钮会得到一些结果和这个结果我想作为部分视图呈现为& quot; GetResidentialTab& quot;局部视图我如何渲染这个...
甚至我的_ListView在这里也是部分视图...
now user click on Search button it will get some result and this result I want to render as partial view into "GetResidentialTab" partial view how I can render this..
even my _ListView is partilview here...
@model BuldertTrackerWeb.Models.ResidentialSearchModels
<div id="SearchListMatching">
@using (Html.BeginForm())
{
if (Model.residentialListView != null)
{
<ul>
@foreach (var item in Model.residentialListView)
{
<li>
<a href="@Url.Action("Details", new { id = item.Id })">
<img alt="@item.Title" src="@item.Url" />
<span>@item.Detail</span>
</a>
</li>
}
</ul>
}
}
</div>
我不知道怎么打电话我在Controll里面打电话就像
I have no Idea how to call I am calling it inside the Controll like
public ActionResult GetSelectedRadioButton(ResidentialSearchModels model)
{
//var SelectedRadioButton = model.RadioButtonView.SelectedRadioButton;
//Do something according to the selected value
model.residentialListView = new List<ResidentialListViewModels>()
{
new ResidentialListViewModels(){Id =1, Url="", Detail="Sample 1", Title="Title 1"},
new ResidentialListViewModels(){Id =2, Url="", Detail="Sample 2", Title="Title 2"},
new ResidentialListViewModels(){Id =3, Url="", Detail="Sample 3", Title="Title 3"},
new ResidentialListViewModels(){Id =4, Url="", Detail="Sample 4", Title="Title 4"},
new ResidentialListViewModels(){Id =5, Url="", Detail="Sample 5", Title="Title 5"},
};
return PartialView("~/Views/Shared/_ListView.cshtml", model);
}
但它不起作用......？
but it will not working...??
我建议你在每个标签点击时使用jQuery加载局部视图。实际上局部视图呈现普通的html。所以你可以把它放在你想要的任何地方。在下面的链接我创建了一个样本。请仔细阅读
http://fromjami.wordpress.com/2013/05/26/load-partial-view-as-html-by-using-jquery-ajax-in-asp-net -mvc / [^]
Hope this helps
I recommend you to load the partial view by using jQuery when each tab click. Actually the partial view renders the plain html.So you can place it wherever you want.in the below link i have created a sample. Please go through this
http://fromjami.wordpress.com/2013/05/26/load-partial-view-as-html-by-using-jquery-ajax-in-asp-net-mvc/[^]
Hope this helps
这篇关于如何在选项卡中调用Patial View的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
