Javascript asp.net-操纵页面内容

我想知道是否有人可以解释如何根据按钮是否被点击来操作页面各个部分的内容。我认为我所寻找的类似于php中的include。我不确定asp.net是否也有这样做的方法（部分视图？），或者bootstrap/jquery是否是一种方法。我已经加入了一个.png来说明我要做的事情

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

---

是的，MVC中有部分视图，它们通常属于项目的

视图/共享
文件夹，并以
\uuu
作为前缀（即
\u MyPartial.cshtml
）

正如@adamheg在评论中指出的那样，网络上有许多关于这种设置的教程，以及许多不同的方法来实现您所追求的目标

下面是我大概可以解决的方法

HTML

控制器

public PartialViewResult GetSectionB()
{
    var vm = new MyViewModel();
    //do stuff

    return PartialView("_SectionB", vm);
 }

是的，MVC中有部分视图，它们通常属于项目的
视图/Shared
文件夹，并以
\u
作为前缀（即
\u MyPartial.cshtml
）

正如@adamheg在评论中指出的那样，网络上有许多关于这种设置的教程，以及许多不同的方法来实现您所追求的目标

下面是我大概可以解决的方法

HTML

控制器

public PartialViewResult GetSectionB()
{
    var vm = new MyViewModel();
    //do stuff

    return PartialView("_SectionB", vm);
 }

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

这次模型有多个属性：

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
包含与表单数据匹配的属性，因此它选择该操作。还有其他ubtle规则，但基本上就是这样。在幕后，它仍然会在控制器中实例化一个模型，它只是在框架中，而不是在您编写的代码中

另一次编辑

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

<input type="hidden" id="name-holder" />
<input type="hidden" id="age-holder" />

单击按钮以显示局部时，将适当的数据发送到控制器以在局部中渲染：

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

希望这就是您所需要的…
在控制器中，有一个返回
部分视图的操作：

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

这次模型有多个属性：

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
包含与表单数据匹配的属性，因此它选择该操作。还有其他ubtle规则，但基本上就是这样。在幕后，它仍然会在控制器中实例化一个模型，它只是在框架中，而不是在您编写的代码中

另一次编辑

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

<input type="hidden" id="name-holder" />
<input type="hidden" id="age-holder" />

单击按钮以显示局部时，将适当的数据发送到控制器以在局部中渲染：

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

希望这就是你所需要的…
有很多关于局部视图的教程-这是你在MVC中要问的。有很多关于局部视图的教程-这是你在MVC中要问的。有没有一种方法可以在局部视图之间来回切换，而不必每次创建模型的新实例？在其他wo中rds，在部分视图之外保留存储在模型中的数据？我的第一个想法是将模型传递到实际视图，然后从部分视图中使用它，但这似乎不起作用..例如..我的模型有几个布尔值默认为true。我希望用户能够切换这些值。然后转到下一个部分视图。我现在看到的是，如果他们返回到已修改的局部视图，它将返回到默认值。我将进行编辑，希望能够帮助您。我刚刚从您的编辑中学到了很多。感谢您的深入研究。没问题。很高兴我能提供帮助。是否有一种方法可以在局部视图之间来回切换，而不必创建新视图每次模型的实例？换句话说，将存储在模型中的数据保留在部分视图之外？我的第一个想法是将模型传递到实际视图，然后从部分视图中使用它，但这似乎不起作用。例如。我的模型有几个布尔值默认为true。我希望用户能够切换这些。然后转到下一个局部视图。我现在看到的是，如果他们返回到已修改的局部视图，它将返回到默认值。我将进行编辑，希望能帮助您。我只是