我想知道是否有人可以解释如何根据是否单击按钮来操作页面各个部分的内容。我认为我正在寻找类似于 php 中的包含。我不确定 asp.net 是否有办法做同样的事情（部分视图？）或者 bootstrap/jquery 是否可行。我已经包含了一个 .png 来说明我正在尝试做的事情。
我希望 B 部分的内容根据 A 部分中选择的按钮进行更改。虽然不一定与这个问题相关.. 然后我希望 B 部分中的各种用户输入来操纵 C 部分中的现有内容。
【问题讨论】：
标签： javascript jquery asp.net asp.net-mvc twitter-bootstrap
在您的控制器中，有一个返回 PartialView 的操作：
public PartialViewResult MyPartial(string someText)
{
var model = new MyPartialModel {SomeStuff = someText};
return PartialView(model);
}
像创建其他任何东西一样创建模型和局部视图：
public class MyPartialModel
{
public string SomeStuff { get; set; }
}
局部视图：
@model ExampleApp.Models.MyPartialModel
@Html.TextBoxFor(m => m.SomeStuff)
然后在您的页面上，您可以使用 jQuery 通过 ajax 加载部分内容：
<div>
<button type="button" id="load-partial">Load The Partial!</button>
</div>
<div id="section-b"></div>
@section Scripts{
<script>
$(document).ready(function () {
$('#load-partial').click(function () {
$.get('MyPartial', { sometext: "Hello!" }).done(function (data) {
$('#section-b').html(data);
});
});
});
</script>
}
编辑回复评论：
如果不想每次都在控制器中实例化新模型，可以直接从视图中传递模型（或多或少）。
在您的控制器中，有一个非常简单的操作，它接受模型作为参数并返回部分视图。注意HttpPost 属性。
[HttpPost]
public PartialViewResult MyPartial(MyPartialModel model)
{
return PartialView(model);
}
这次模型有多个属性：
public class MyPartialModel
{
public string Name { get; set; }
public int Age { get; set; }
}
部分几乎相同，只是它现在显示模型的新属性。
@model MVCPlayGround.Models.MyPartialModel
@Html.TextBoxFor(m => m.Name)
@Html.TextBoxFor(m => m.Age)
主页/视图上的 jquery 也非常相似，但使用 POST 而不是 GET。
// these could be anything, from control on the page, or whatever
var name = "James";
var age = 30;
$(document).ready(function () {
$('#load-partial').click(function () {
// note that Name and the Age are the names of the properties in our model
$.post('MyPartial', { Name: name, Age: age }).done(function (data) {
$('#section-b').html(data);
});
});
});
这是因为当数据通过 POST 传输时，它被视为表单数据，当控制器决定使用哪个动作时，它会查看动作的参数，并将它们与可用的表单数据进行比较。 MyPartialModel 包含与表单数据匹配的属性，因此它会选择该操作。还有其他微妙的规则，但基本上就是这样。在幕后，它仍然会在控制器中实例化模型，它只是在框架中，而不是在您编写的代码中。
另一个修改
刚刚重新阅读了您的评论，我认为我没有完全回答。 如果您想将在局部视图中所做的更改保存到主视图，请在主视图中设置一些隐藏字段来保存这些数据。
<input type="hidden" id="name-holder" />
<input type="hidden" id="age-holder" />
然后当你想为它们存储一个值时，只需使用 jquery 设置值：
$('#some-save-button-maybe').click(function(){
$('#name-holder').val($('id-of-name-on-partial').val());
$('#age-holder').val($('id-of-age-on-partial').val());
});
当您单击按钮以显示部分时，将适当的数据发送到控制器以在部分中呈现：
$('#load-partial').click(function () {
$.post('MyPartial', { Name: $('#name-holder').val(), Age: $('#age-holder').val() }).done(function (data) {
$('#section-b').html(data);
});
});
希望这就是你所需要的......
【讨论】：
是的，MVC 中有部分视图，它们通常属于项目的 Views/Shared 文件夹，并以 _ 为前缀（即 _MyPartial.cshtml。
正如@AdamHeeg 在 cmets 中指出的那样，网络上有很多关于这种设置的教程和许多不同的方法来实现你所追求的。
这大概是我如何解决它...
HTML
<nav>
@Html.ActionLink("Button 1", "GetSectionB")
</nav>
<section id="sectionB">
<!-- Content here -->
</section>
JavaScript
$('nav a').on('click', function (e) {
e.preventDefault();
$.get(this.href, function (html) {
$('#sectionB').html(html);
});
});
控制器
public PartialViewResult GetSectionB()
{
var vm = new MyViewModel();
//do stuff
return PartialView("_SectionB", vm);
}
【讨论】：