Asp. Net -Чтение ядра в js значениях модели при нажатии

Question

У меня есть этот код в моем Asp. Net -Web-приложении с Razor Pages, и я пытаюсь прочитать входные данные в js только при нажатии кнопки «Отправить».

В моем Razor Page

<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>

И в моем js я их прочитал:

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

Но проблема в том, что с этим кодом значения считываются при запуске приложения, и я нужно, чтобы они были прочитаны только после нажатия кнопки отправки. Есть ли способ сделать это?

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. Просто сохраните имя свойства и имя входа одинаковыми. на страницах razor он имеет атрибут BindProperty для привязки данных:

Index.cs html:

@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.cs html .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

Насколько я понял, вам нужно значения, которые будут прочитаны только после нажатия кнопки «Отправить» . Вам нужно добавить событие нажатия на кнопку «Отправить»:

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

Функция initializeValues ​​() будет выполняться только при нажатии кнопки «Отправить»:

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

Answer 3

Используйте код javascript вместо razor syntax. Чтобы получить значение @Model.Value1, используйте document.getElementById, как показано ниже.

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

• Ваша кнопка clickme не имеет onclick attribute, поэтому я предполагаю, что вы можете привязать событие щелчка из кода javascript или jquery, используя document.getElementById("clickme").onclick = function() {...}; или $('#clickme').click(function() {...});. Внутри этой функции вы должны использовать var val1 = document.getElementById('Value1').value, чтобы получить значение latest.

Примечание , когда вы используете razor syntax, например var val1 = @Model.Value1;, он будет проанализирован и отправлен в ваш браузер с соответствующими html или text. Итак, если вы попытаетесь проверить html из консоли браузера и просмотреть отрисованный источник, ваш блок script будет выглядеть, как показано ниже. (Предположим, что ваш @ Model.Value1 = 10 & @ Model.Value2 = "ab c") .

<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>