javascript - asp.net - 操作页面内容

Question

我想知道是否有人可以解释如何根据是否单击按钮来操作页面各个部分的内容。我认为我正在寻找的内容类似于 php.ini 中的包含内容。我不确定 asp.net 是否有办法做同样的事情(部分 View ？)或者 bootstrap/jquery 是否是可行的方法。我添加了一个 .png 来说明我正在尝试做的事情。

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

Answer 1

在您的 Controller 中，有一个返回 PartialView 的操作:

public PartialViewResult MyPartial(string someText)
{
    var model = new MyPartialModel {SomeStuff = someText};
    return PartialView(model);
}

像创建其他模型一样创建模型和局部 View :

public class MyPartialModel
{
    public string SomeStuff { get; set; }
}

部分 View :

@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>
}

编辑回答评论:如果您不想每次都在 Controller 中实例化新模型，则可以直接从 View 传递模型(或多或少)。在您的 Controller 中，有一个非常简单的操作，它接受模型作为参数并返回部分 View 。请注意 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)

主页/ View 上的 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 传输数据时，它被视为表单数据，并且当 Controller 决定使用哪个操作时，它将查看操作的参数，并将它们与可用的表单数据进行比较。 MyPartialModel 包含与表单数据匹配的属性，因此它选择该操作。还有其他微妙的规则，但基本上就是这样。在幕后，它仍然会在 Controller 中实例化模型，它只是在框架中，而不是在您编写的代码中。

再次编辑

刚刚重新阅读了您的评论，我认为我没有完全回答它。如果您想将在局部 View 中所做的更改保存到主视图，请在主视图中使用一些隐藏字段来保存此数据。

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

当您单击按钮显示部分时，将适当的数据发送到 Controller 以在部分中呈现:

$('#load-partial').click(function () {
    $.post('MyPartial', { Name: $('#name-holder').val(), Age: $('#age-holder').val() }).done(function (data) {
        $('#section-b').html(data);
    });
});

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