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

Question

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

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

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

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

谢谢你。

Answer 1

您可以按如下方式进行。

假设您有一个 model，如下所示：

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 controller 上的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);
        }
}

在这里你可以看到我正在通过书 model 到局部视图。

这是我的_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 调用来简单地调用 controller。

从 controller 加载 _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字段中获取数据，创建一本书 object 并将其传递给 Home controller 中的DataFromPartialView方法。

下面是方法代码：

public PartialViewResult DataFromPartialView(Book mybook)
        {

            return View();
        }

这样您就可以将 model 数据传递给 controller。

最后是包含部分视图的 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>

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

问题描述

1 个解决方案

解决方案1
0 2019-10-28 11:09:18

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

问题描述

1 个解决方案

解决方案1 0 2019-10-28 11:09:18

解决方案1
0 2019-10-28 11:09:18