Question

我想知道是否有人可以解释如何操作页面各个部分的内容，具体取决于是否单击了按钮。我认为我正在寻找的类似于PHP中的包含。我不确定asp.net是否有办法做同样的事情（部分视图？）或者如果bootstrap / jquery是要走的路。我已经包含了一个.png来说明我想要做的事情。

我希望根据A部分中选择的按钮更改b部分的内容。虽然不一定与此问题相关..然后，我希望B部分中的各种用户输入操作C部分中的现有内容。

Answer 1

是的，MVC中有部分视图，它们通常属于项目的Views/Shared文件夹，并以_为前缀（即_MyPartial.cshtml。

正如@AdamHeeg在评论中指出的那样，网上有很多关于这种设置的教程，以及许多不同的方法来实现你的目标。

以下是我可以解决的问题......

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);
 }

Answer 2

在您的控制器中，有一个返回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);
    });
});

希望这就是你所需要的......

asp.net - 操纵页面内容

2 个答案: