将数据从 JavaScript 代码传递到基于 ASP.NET Core 3.1 MVC 的应用程序中的 Razor 分部视图

Question

Here are some details about our development environment:

-DevExpress 20.1.7 ( we are using DevExtreme )

-Microsoft Visual Studio Enterprise 2019 (Version 16.4.6)

-ASP.NET Core 3.1.0

I canNot do the following with JavaScript because the document javascript object is undefined inside the following razor code.

@await Html.PartialAsync("UpldPopupContentTmpltPartial", new ViewDataDictionary(ViewData) { { "BookId", document.getElementById("HiddenSelectedUploadDataType").Value } });

Could someone please give me a detailed explanation with sample code that will show me how I can pass the document.getElementById("HiddenSelectedUploadDataType").Value to the aforementioned partial view?

@yiyi-you Thank you for your detailed explanation within your answer. However, I used the following line of code with @Html.Raw , but even though I'm practical if deadline dates for projects are really close, and I have to get stuff done, I still prefer the proper code implementation practices especially when it makes it easier for code reuse in the future and/or security and/or clarity:

@await Html.PartialAsync("UpldPopupContentTmpltPartial", new ViewDataDictionary(ViewData) { { "BookId", @Html.Raw("document.getElementById('HiddenSelectedUploadDataType').Value")} });

Is the aforementioned code adhere to proper implementation practices? If yes or no then please do explain. Appreciate feedback. Thanks.

Answer 1

There are two solutions:

1.pass model data to Partial,here is a demo:

TestPartial.cshtml:

@model Model1
    <input asp-for="HiddenSelectedUploadDataType" />
    @await Html.PartialAsync("UpldPopupContentTmpltPartial", new ViewDataDictionary(ViewData) { { "BookId",Model.HiddenSelectedUploadDataType } })

Model1:

public class Model1
    {
        public string HiddenSelectedUploadDataType { get; set; }
    }

UpldPopupContentTmpltPartial.cshtml:

<div>@ViewData["BookId"]</div>

result：

2.You can use ajax to pass document.getElementById("HiddenSelectedUploadDataType").Value to action,and action return partial view to view,here is a demo:

TestPartial.cshtml:

    @model Model1
    <input asp-for="HiddenSelectedUploadDataType" />
    <div id="partial"></div>
    @section scripts{ 
    <script>
        $(function () {
            $.ajax({
                url: '/TestSlick/GetPartial',
                type: 'POST',
                data: {
                    BookId: $("#HiddenSelectedUploadDataType").val()
                },
                success: function (data) {
                    $('#partial').html(data);
                }
            });  
        })
    </script>
    }
TestSlickController：
     

    public IActionResult TestPartial() {
            Model1 m = new Model1 {  HiddenSelectedUploadDataType="sdsss"};
            return View(m);
        }
        public IActionResult GetPartial(string BookId) {
            ViewData["BookId"] = BookId;
            return PartialView("UpldPopupContentTmpltPartial");
        }

result：