asp.net mvc-在彼此内部使用Razor和javascript

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>