Question

我想在Razor中使用这样的javascript变量：

我的HTML：

@{List<AddTempViewModel> tempsToView = new List<AddTempViewModel>();
  tempsToView = (List<AddTempViewModel>)ViewData["tempsToView"];}

@if (tempsToView != null)
{
    @foreach (var item in tempsToView)
    {
       <a class="click" id="@item.TempDocumentId">
       <img id="leftSideBarElement" src="@item.TempDocumentAddressUrl" />
       </a><br />
    }
<form method="post" action="">
   <input id="documentNumber" class="form-control" type="text" name=""  
     placeholder="Email" />
 </form>

和我的剧本：

<script>

    $(document).ready(function () {
        $(".click").click(function () {
            var divID = $(this).attr('id');
            alert(divID);
            var docName = @tempsToView[divID].TempDocumentId
            $("#documentNumber").val(docName);
        });
    });
</script>

但我无法使用divID设置@tempsToView的索引。除了这个，请帮我做什么。谢谢。

Answer 1

您无法根据JavaScript中发生的事情设置Razor变量。 Razor运行服务器端，而JavaScript运行客户端，毕竟Razor已经运行。

Answer 2

它不是很清楚你需要什么，但如果我找对你...我曾经把Razor和Js混合在一起但是从长远来看我会发现两件事：

看起来很丑陋
如果将js代码移动到单独的.js文件中，它将无法运行，因为 Razor引擎不处理JS文件。

因此，一个简单而优雅的解决方案是使用数据属性：

 @foreach (var item in tempsToView)
        {
           <a class="click" id="@item.TempDocumentId" 
             data-document-name="@item.TempDocumentName"
             data-document-isbn="@item.TempDocumentIsbn">
           <img id="leftSideBarElement" src="@item.TempDocumentAddressUrl" />
           </a><br />
        }

然后只需获取所需的数据属性：

 $(document).ready(function () {
    $(".click").click(function () {
        var divID = $(this).attr('id');
        alert(divID);
        var docName = $(this).attr('data-document-name');
        var docIsbn = $(this).attr('data-document-isbn');
        //and any other property you may need
        $("#documentNumber").val(docName);
    });
});

你保持这种方式，你所有的HTML / Razor和JS分离，并且仍然是功能性的，一个干净的代码，每个元素都是自给自足的。

Answer 3

<script>

    $(document).ready(function () {
        var divID = $(this).attr('id');
        alert(divID);
        var documentName = $(@Html.Raw(JsonConvert.SerializeObject(tempsToView )))[divID];
        console.log(documentName);
    });

</script>

在彼此内使用Razor和javascript

3 个答案: