asp.net-mvc 在按钮单击 mvc 上显示部分视图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23995888/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show partial view on button click mvc
提问by user3681593
I'm trying to figure out mvc, so I have problem... I have this model:
我想弄清楚 mvc，所以我有问题......我有这个模型：
public class Company
{
public string ID { get; set; }
public string Symbol { get; set; }
public string Description { get; set; }
}
and controller:
和控制器：
public ActionResult EditCompany()
{
ViewBag.Message = "Edit Company Page";
return View();
}
public ActionResult PartialEditCompany()
{
DataSet dataSet = client.SelectCompanies();
ObservableCollection<Company> inventoryList = new ObservableCollection<Company>();
foreach (DataRow dataRow in dataSet.Tables[0].Rows)
{
inventoryList.Add(new Company
{
ID = (String)dataRow["ID"],
Symbol = (String)dataRow["Symbol"],
Description = (String)dataRow["Description"]
});
}
return PartialView(inventoryList);
}
and view EditCompany:
并查看 EditCompany：
@model Test.Models.Company
@{
ViewBag.Title = "EditCompany";
}
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<link href="~/Content/mycss.css" rel="stylesheet" />
<script>
$('#loadData').click(function () {
$('#partial').load('/HomeController/PartialEditCompany/');
});
</script>
<div id="stylized2" class="myform">
@using (Html.BeginForm("SaveCompany", "Home", FormMethod.Post, new { @class = "insertcompanyform" }))
{
@Html.ValidationSummary(true)
<table>
<tr>
<td class="first">@Html.Label("ID:")
</td>
<td class="second">@Html.TextBoxFor(m => m.ID)</td>
</tr>
<tr>
<td class="first">
@Html.Label("Symbol:")
</td>
<td class="second">@Html.TextBoxFor(m => m.Symbol)</td>
</tr>
<tr>
<td class="first">
@Html.Label("Description:")
</td>
<td class="second">@Html.TextBoxFor(m => m.Description)</td>
</tr>
<tr>
<td class="third"><input type="button" value="Tra?i" id="loadData" /></td>
</tr>
<tr>
<td>
<div id="partial"></div>
</td>
</tr>
and finnaly partialview PartialEditCompany:
和最后部分视图 PartialEditCompany：
@using System.Web.Helpers
@{
var grid = new WebGrid(Model, canPage: true, rowsPerPage: 5,
selectionFieldName: "selectedRow", ajaxUpdateContainerId: "gridContent");
grid.Pager(WebGridPagerModes.NextPrevious);
}
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<link href="~/Content/mycss.css" rel="stylesheet" />
@Html.WebGrid()
What I want to do is on button click (with id=loadData) to call partial view that will put grid into div tag (with id=parital). Please help! What am I doing wrong?
我想要做的是单击按钮（使用 id=loadData）调用部分视图，将网格放入 div 标签（使用 id=parital）。请帮忙！我究竟做错了什么？
回答by Jorge F
Well as I can't comment here are some points I use to call partial views
好吧，因为我不能在这里发表评论，所以我用一些要点来调用部分视图
- If you are using a "main view" or a "shared view", you only need to define the scripts on the main view, not in your partial.
- If you want a partial view to be loaded on click without any parameter you can call it and "hide it"
- 如果您使用“主视图”或“共享视图”，则只需在主视图上定义脚本，而不是在局部视图中。
- 如果您希望在没有任何参数的情况下点击加载部分视图，您可以调用它并“隐藏它”
View
看法
<div id="partial" style="display: none">
@{Html.RenderAction("PartialEditCompany"); }
</div>
Controller
控制器
[ChildActionOnly]
public ActionResult PartialEditCompany()
{
//stuff you need and then return the partial view
//I recommend using "" quotes for a partial view
return PartialView("inventoryList");
}
And then if you want to have your partial view show on click you only display the div containing the div.
然后，如果您想在单击时显示部分视图，则只显示包含 div 的 div。
But if you want to use your partial view with parameters you can do the following
但是，如果您想使用带有参数的部分视图，您可以执行以下操作
Javascript
Javascript
function getview(parameter){
var url = "@Html.Raw(Url.Action("PartialEditCompany", "Controller", new { parameterID = "-parameter" }))";
url = url.replace("-parameter", parameter);
$('#partial').load(url);
/*Better code by October 11, 2017, you can use this instead of the 3 lines on top*/
/*
var url = "@Html.Raw(Url.Action("PartialEditCompany", "Controller", new { parameterID = "-parameter" }))";
url = url.replace("-parameter", parameter);
$.ajax({
url: url,
type: "GET",
cache: false,
success: function(result){
$("#partial").html(result)
},
error: function(){
//handle your error here
}
});
*/
}
With javascript you can call a partial view and pass the parameter to the controller. Of course you don't specify if you need parameters or not, but here are both solutions I use with partial views. And you call your javascript function onclick event if you want or as you may like. (or using data-attr on the tag, and the with javascript or jquery on the click event, get that data-attr value without creating, this could be the unobtrusive way)
使用 javascript，您可以调用局部视图并将参数传递给控制器。当然，您没有指定是否需要参数，但这里有我在部分视图中使用的两种解决方案。如果您愿意或喜欢，您可以调用您的 javascript 函数 onclick 事件。（或在标签上使用 data-attr，并在点击事件上使用 javascript 或 jquery，在不创建的情况下获取该 data-attr 值，这可能是一种不引人注目的方式）
<input type="button" value="Tra?i" id="loadData" onclick='getview(parameter)' />
Hope this help a little about partial views.
希望这对部分视图有所帮助。
