是否可以在 ASP.NET MVC 的局部视图上使用一些 JavaScript？答案

【问题标题】：Is it possible use some JavaScript on a Partial View in ASP.NET MVC?是否可以在 ASP.NET MVC 的局部视图上使用一些 JavaScript？
【发布时间】：2020-02-21 21:32:14
【问题描述】：

我是 .NET MVC 和 StackOverFlow 的新手，可能你会鄙视我使用的方法，但我有点困惑。

情况是这样的：我有三个局部视图和自己的模型，这些局部视图都渲染在一个完整的视图中。完整视图有一个模型，其中包含部分视图的三个模型。一个特定的局部视图有一个表单，它必须执行 ajax 请求并将一些数据发送到完整视图的主控制器，以执行操作。

现在，问题是所有内容都在主页中呈现，我需要从局部视图的模型中获取数据，如果我在主页中使用脚本，我需要的数据不存在.从这个问题得出我的问题。

如果您有一些建议，我很乐意接受。我知道这有点令人困惑，如果您需要其他解释，我会尽力给您。

谢谢。

【问题讨论】：

标签： javascript asp.net-mvc model-view-controller model asp.net-mvc-partialview

【解决方案1】：

您可以按照以下方式进行操作。

假设你有一个模型如下：

public class Book
    {
    [Key]
    public int ID { get; set; }

    public string Title { get; set; }

    public string Description { get; set; }

    public decimal Price { get; set; }

}

您有一个名为 index 的父页面和两个名为 LoadPartialView1 的局部视图，LoadPartialView2 正在该页面上加载。

您可以使用@Html.Action("LoadPartialView1", "Home") 加载部分视图。这里将执行Home 控制器上的LoadPartialView1 方法。

public class HomeController : Controller
    {
public PartialViewResult LoadPartialView1()
        {
            Book book = new Book()
            {
                ID = 1,
                Title = "Book1",
                Description = "Test",
                Price = Convert.ToDecimal(250.00)
            };
            return PartialView("_PartialView1", book);
        }
}

在这里你可以看到我正在将书籍模型传递给局部视图。

这是我的_PartialView1。

@model WebApplication1.Models.Book

<h4>This is the _PartialView1 Header</h4>
<p id="bookId">Book Id = @Model.ID</p>
<p>Book Title = @Model.Title</p>
<p>Book Descrittion = @Model.Description</p>
<p>Book Price = @Model.Price</p>

还有另一种情况。假设您要提交表单。您可以简单地使用 Ajax 调用来调用控制器。

从控制器加载_PartialView2如下：

public PartialViewResult LoadPartialView2()
        {
            Book book = new Book();
            return PartialView("_PartialView2", book);
        }

这是我的 _PartialView2 视图：

@model WebApplication1.Models.Book

<h4>This is the _PartialView2 Header</h4>
<label>Book Id</label><input id="bookId" type="text" />
<label>Book Title</label><input id="bookName" type="text" />
<label>Book Descrittion</label><input id="bookDesc" type="text" />
<label>Book Price </label><input id="bookPrice" type="text" />
<input id="btnSave" type="button" value="Save"/>

<script type="text/javascript">

    $("#btnSave").click(function () {
        var id = $('#bookId').val();
        var name = $('#bookName').val();
        var desc = $('#bookDesc').val();
        var price = $('#bookPrice').val();

        var mybook = {
            ID: id,
            Title: name,
            Description: desc,
            Price: price

        };

        $.ajax({
            url: "/Home/DataFromPartialView",
            type: "POST",
            data: JSON.stringify(mybook),
            dataType: 'json',
            contentType: "application/json; charset=utf-8",
            error: function (xhr) {
                alert('Error');
            },
            success: function (result) {
                alert('Success');

            },
        });

    });

</script>

这里我从 input 字段中获取数据，创建一个 book 对象并将其传递给 Home 控制器中的 DataFromPartialView 方法。

方法代码如下：

public PartialViewResult DataFromPartialView(Book mybook)
        {

            return View();
        }

这样您就可以将模型数据传递给控制器。

最后是包含部分视图的 Indec Page 代码。

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    <div> 
        <p>This is my Home Page.</p>
    </div>
    <div id="partialView1">
       @Html.Action("LoadPartialView1", "Home")
    </div>
    <div id="partialView2">
        @Html.Action("LoadPartialView2", "Home")
    </div>
</body>
</html>

【讨论】：