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

Question

以下是有关我们开发环境的一些详细信息：

-DevExpress 20.1.7（我们使用的是 DevExtreme）

-Microsoft Visual Studio Enterprise 2019（版本 16.4.6）

-ASP.NET 核心 3.1.0

我无法使用 JavaScript 执行以下操作，因为文档 javascript 对象在以下剃须刀代码中未定义。

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

有人可以用示例代码给我一个详细的解释，它将告诉我如何将 document.getElementById("HiddenSelectedUploadDataType").Value 传递给上述部分视图？

@yiyi-you 感谢您在回答中的详细解释。但是，我将以下代码行与 @Html.Raw 一起使用，但即使如果项目的截止日期真的很接近我很实用，而且我必须完成工作，我仍然更喜欢正确的代码实现实践，尤其是当它使将来的代码重用和/或安全性和/或清晰度更容易：

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

上述代码是否遵循正确的实施实践？如果是或否，请解释一下。感谢反馈。谢谢。

标签： javascriptasp.net-corerazorpartial-views

Answer 1

有两种解决方案：

1.将模型数据传递给Partial，这里有一个demo：

测试部分.cshtml：

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

型号1：

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

UpldPopupContentTmpltPartial.cshtml：

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

结果：

2.可以使用ajax传递document.getElementById("HiddenSelectedUploadDataType").Value 给action，action返回部分视图来查看，这里有一个demo：

测试部分.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");
        }

结果：