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

Question

I am new on .NET MVC and on StackOverFlow, probably you will disdain on the approach that I am using, but I am a little bit confused.

The situation is this: I have three partial view with their own model, these partial view are rendering in a complete view. The complete view have a model who contains the three model of the partial views. A specifique partial view has a form who have to perform an ajax request and send some data to the main controller of the complete view with the goal to perform an action.

Now, the problem is that everything is rendering in the main page and I need to take the data from the model of the partial view and if I use a script in the main page, the data that I need aren't there. From this problem derive my question.

If you have some advices I will be happy to receive them. I know is a little bit confusing and if you need other explanation I'll try to give you.

Thank you.

Answer 1

You can do that as follows.

Assume you have a model as follows:

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

    public string Title { get; set; }

    public string Description { get; set; }

    public decimal Price { get; set; }

}

And you have a parent page called index and two partial views called LoadPartialView1 , LoadPartialView2 are loading on that page.

You can user @Html.Action("LoadPartialView1", "Home") to load partial view. Here LoadPartialView1 method on Home controller will be executed.

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

Here you can see that I am passing the book model to the partial view.

And here is my _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>

And the other scenario. Assume you want to submit an form. You can simply call controller using an Ajax Call.

Loading _PartialView2 from controller as follows:

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

This is my _PartialView2 view:

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

Here I am getting the data from input fields, create an book object and pass it to the DataFromPartialView method in Home controller.

Here is the method code:

public PartialViewResult DataFromPartialView(Book mybook)
        {

            return View();
        }

This way you can pass model data to controller.

And finally the code of Indec Page which contains the partial views.

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