单击Asp.Net-Core读入js模型值

Question

我的Asp.Net-Web应用程序中有Razor页面，只有单击Submit按钮时，我才会尝试读取js中的输入。

在我的Razor页面

<form method="post">
 <input asp-for="Value1" id="value1" />
 <input asp-for="Value2" id="value2" />
 <button type="submit" value="Search" id="clickme">Search</button>
</form>

在我的短文里我读到：

<script>
  var val1 = @Model.Value1;
  var val2 = @Model.Value2;
</script>

但问题是，使用这段代码，当应用程序启动时，将读取值，而我只需要在单击submit按钮之后才读取这些值。有什么办法我能做到吗？

Answer 1

如果使用@Model.PropertyName，它总是在应用程序启动时呈现值，正确的方法是使用js获取值。

下面是一个示例，如下所示：

<form method="post">
    <input asp-for="Value1" id="value1" />
    <input asp-for="Value2" id="value2" />
    
    <button type="submit" value="Search" id="clickme" onclick="Search()">Search</button>
</form>
@section Scripts
{
    <script>
        function Search() {
        var val1 = $('#value1').val();
        var val2 = $('#value2').val();
        //do your stuff....
        }
    </script>
}

不确定您的场景是什么，如果您只想将两个输入值传递给后端，甚至不需要使用js.Just保存属性名，而输入名称是剃刀页面中的same.And，则它具有BindProperty属性来绑定数据：

Index.cshtml：

@page
@model IndexModel
<form method="post">
    <input asp-for="Value1" id="value1" />
    <input asp-for="Value2" id="value2" />

    <button type="submit" value="Search" id="clickme">Search</button>
</form>

Index.cshtml.cs：

public class IndexModel : PageModel
{
    [BindProperty]
    public string Value1 { get; set; }
    [BindProperty]
    public string Value2 { get; set; }       

    public async Task<IActionResult> OnGet()
    {                   
        return Page();
    }
    public void OnPost() 
    { 
        //do your stuff
    }
}

结果：

​

​

或者添加如下参数：

public void OnPost(string Value1,string Value2) 
{ 
    //do your stuff
}

Answer 2

使用javascript代码而不是razor syntax。要获得@Model.Value1的值，请使用document.getElementById，如下所示。

var val1 = document.getElementById('Value1').value;
var val2 = document.getElementById('Value2').value;

，

• ，您的clickme按钮没有onclick attribute，所以我猜您可能正在使用document.getElementById("clickme").onclick = function() {...};或$('#clickme').click(function() {...});绑定javascript或jquery代码中的单击事件。在该函数中，您应该使用var val1 = document.getElementById('Value1').value获取latest值.

Note当您使用razor syntax (如var val1 = @Model.Value1; )时，它将被解析并与相应的html或text一起发送到浏览器。因此，如果您尝试从浏览器控制台检查html &视图呈现的源代码，您的script块如下所示。(假设您的@Model.Value1 = 10 & @Model.Value2 = "abc")。

<script>
  var val1 = 10;
  var val2 = abc; //<-- here it will not have "", so it will treated abc as an object.
  // Also it will throw an error here because there might not be any object abc.
  // If you want it to be print as string then you should be wrap @Model.Value2 with "" or '' like below.
  // var val2 = "@Model.Value2"; which will convert to var val2 = "abc";
</script>

Answer 3

根据我所理解的，您需要，只有在提交后才能读取值，单击。您需要向Submit按钮添加一个单击事件：

 <button type="submit" value="Search" id="clickme" onclick="initializeValues()">Search</button>

只有单击Submit按钮时才会执行函数initializeValues()：

​

<script>
var val1 ; 
var val2 ;
function initializeValues()
{
 val1 = @Model.Value1;
 val2 = @Model.Value2;
}
</script>

​