Passing data from JavaScript code to the a Razor partial view within ASP.NET Core 3.1 MVC based application

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

I am seeking a detailed explanation with sample code that will show me how I can pass the document.getElementById("HiddenSelectedUploadDataType").Value to the aforementioned partial view.

Updates

@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, I still prefer proper 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 adhering to proper implementation practices?

To give you a detailed explanation, we need to see your code, what you have attempted to do so far ;) — IvanD
– IvanD, Commented Oct 28, 2020 at 19:10

Yiyi You · Accepted Answer · 2020-10-29 02:42:13Z

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：

answered Oct 29, 2020 at 2:42

Yiyi You

18.4k1 gold badge19 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

crazyTech Over a year ago

Thank you for your detailed explanation within your answer. However, could you please look at my updated post? I used Html.Raw but I'm Not sure if it's a good or bad implementation coding practice.

Collectives™ on Stack Overflow

Passing data from JavaScript code to the a Razor partial view within ASP.NET Core 3.1 MVC based application

Updates

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Updates

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related