Можно ли использовать JavaScript на частичное представление в ASP.NET MVC? - PullRequest
Новая
       52

Можно ли использовать JavaScript на частичное представление в ASP.NET MVC?

0 голосов
/ 25 октября 2019

Я новичок в .NET MVC и в StackOverFlow, возможно, вы будете презирать подход, который я использую, но я немного запутался.

Ситуация такова: у меня есть три частичных представленияс их собственной моделью, эти частичные представления отображаются полностью. В полном представлении есть модель, которая содержит три модели частичных представлений. Определенное частичное представление имеет форму, которая должна выполнить запрос ajax и отправить некоторые данные главному контроллеру полного представления с целью выполнения действия.

Теперь проблема заключается в том, что все отображается вглавной странице, и мне нужно взять данные из модели частичного представления, и если я использую сценарий на главной странице, данных, которые мне нужны, там нет. Из этой проблемы вытекает мой вопрос.

Если у вас есть какие-либо советы, я буду рад их получить. Я знаю, это немного сбивает с толку, и если вам нужны другие объяснения, я постараюсь дать вам.

Спасибо.

1 Ответ

0 голосов
/ 28 октября 2019

Вы можете сделать это следующим образом.

Предположим, у вас есть следующая модель: 

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") для частичной загрузки. Здесь будет выполняться метод LoadPartialView1 на контроллере Home. 

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 Call.

Загрузка _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 и передаю его методу DataFromPartialView в контроллере Home.

Вот код метода: 

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