如何对单个cshtml页面中存在的两个具有不同表单名称的输入字段执行javascript api调用？

我有两个表单，用于执行不同目的的计算，现在我在同一个cshtml中有另一个字段，它需要从上述两个表单中获取结果，并在控制器中执行操作。我如何做到这一点。 下面是我的javascript，我用于有多个输入字段的表单，正如我之前所说的，现在的问题是我的两个输入字段是两种不同的表单，我需要得到它并发送到我的控制器

下面2个表单将在控制器类中执行添加。现在我需要考虑Id:Read和Id:ToalPosies的结果，并在我的控制器上执行另一个计算。 控制器只是一个post方法，它接受输入并执行加法。 基本上我需要totalworth=totalProperty+负债

    <script>
    var request;
        if (window.XMLHttpRequest) {
            //New browsers.
            request = new XMLHttpRequest();
            var formData = new FormData(document.forms.assets); //here instead of forms name I want to pass //the id of the 2 input fields and send that for operation in the controller. 
        }
        if (request != null) {
            var url = "Home/TotalAssets";
            request.open("POST", url, false);
            request.send(formData)
            
        }
    
        totalAssets.value = request.response;
    }
    </script>

Below is my html

 <table align="center">
            <tr>
                
                <td>
                    $<input type="number" id="totalworth" name="totalworth" contenteditable="false"  />

                </td>
            </tr>

        </table>
<form name="property">
           
            <table>
                  
                <tr>
                    <td>  Property1  </td>
                    <td> $<input name="property1" type="number" onchange="Assets(event)" value="2000.00" /></td>

                </tr>
                <tr>
                    <td>  property2  </td>
                    <td> $<input type="number" onchange="Assets(event)" name="property2  " value="4000.00" /></td>

                </tr>
 <tr>


                    <td>$ <input type="number" readonly="readonly" name="totalProperty" id="totalProperty" onchange="Assetscalculate(event)"/></td>

                </tr>
            </table>
<form>
 <form name="liabilities">
            <table>
                <tr>
                    <td><h2>Liabilities on property</h2></td>
                </tr>
                <tr>
                    <td>
                        <h3> Short Term Liabilities</h3>
                    </td>
                </tr>
                <tr>
                    <td>  Credit Card 1  </td>
                    <td> $<input type="number" onchange="liabilityChange(event)" id="cccard1" name="cccard1" min="0" value="4342" /></td>

                </tr>
                <tr>
                    <td>  Credit Care 2  </td>
                    <td> $<input type="number" id="cccard2" name="cccard2" min="0" value="322.020"  onchange="liabilityChange(event)" /></td>

                </tr>
<tr>
                   
                    <td> $<input type="number" id="liability" name="liability" readonly="readonly"  onchange="Liabilitiescalculate(event)"  contenteditable="false" /></td>

                </tr>
        </form>

   

}

---

我已经在javascript中添加了上述代码，但它从未执行该函数。

在更新您的帖子后，仍然不完全清楚，因为您没有包含JS函数，我们无法猜测您在那里还做了什么

//Sent and handle..
$.ajax({
 type: 'POST',
 url: '@Url.Action("TotalAssets", "Home")',
 contentType: 'application/json',
 data: data,
 success: function() {
   if (response.success) 
    {
        alert(request.response);
    } 
    else {
        alert('Look into it again..');
    }     
 },
error: function() {
   alert('Error');
},
});

我做了一个设置来展示如何使用jQuery/AJAX在服务器上处理所需的帖子

在应用程序中包括jQuery。
首先，您必须在应用程序中包含jQuery，您可以在de标记之间的_Layout.cshtml中执行此操作，从而在整个应用程序范围内执行此操作

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

将变量强制转换为decimal并执行所需的操作，然后以字符串、decimal或JSON的形式返回值，无论您想要什么

处理响应
然后在JS函数中修改success函数

//Sent and handle..
$.ajax({
 type: 'POST',
 url: '@Url.Action("TotalAssets", "Home")',
 contentType: 'application/json',
 data: data,
 success: function() {
   if (response.success) 
    {
        alert(request.response);
    } 
    else {
        alert('Look into it again..');
    }     
 },
error: function() {
   alert('Error');
},
});

JS（不依赖于jQuery）
如果您想跳过jQuery部分，也可以使用纯JS

    document.getElementById("totalProperty").onchange = function() 
    { 
        PreProcess();
    }

    document.getElementById("liability").onchange = function() 
    { 
        PreProcess();
    }

    function PreProcess()
    {
        let totalProperty = 0;
        let liability = 0;

        totalProperty = document.getElementById("totalProperty").value;
        liability = document.getElementById("liability").value;

        //When values are both set, POST both values to the server..
        if (totalProperty !== '' && totalProperty !== 0 && liability !== '' && liability !== 0) {
            Process(totalProperty, liability);
        }
    }

function Process(totalProperty, liability) 
{
var url = '/Home/TotalAssets?totalProperty=' + totalProperty + '&liability=' 
 + liability;
var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == XMLHttpRequest.DONE) { 
       if (xmlhttp.status == 200) {
           var result = xmlhttp.responseText;
           //Do something with the result
       }
       else {
           alert('Something went wrong: ' + xmlhttp.status);
       }
    }
};

xmlhttp.open("POST", url, true);
xmlhttp.send();
} 

---

干杯 我的html保持不变。Where ever forms有onchange JS函数，就像在本例中我有两个表单，因此我有两个onchange函数来执行计算。

---

在这些表单中使用PreProcess（）；调用，inturn调用进程（totalProperty，Responsibility）；带有参数的请求被发送到控制器（HttpsPost），JSON响应被捕获并发送到totalAssets id。这给了我预期的结果。

我会使用AJAX来实现您的目标，请检查：是的，要同时使用AJAX，我们需要传递参数，对吗？因此，我对传递参数有疑问您可以为这两个表单添加两个更改事件处理程序，当这两个参数不为null或空时，您可以构建自己的FormData对象并将其传递给控制器。我明白了。但在我的情况下，我将字段（param1和param2）作为参数传递给控制器，这些字段值是根据在form1和form2中获得的结果动态创建的。希望我的问题很清楚。你们能用需要的HTML和控制器编辑你们的问题吗？当然。谢谢，看到这么详细的解释真是太好了。但我不应该使用JQuery，需要使用javascript。我该怎么做？我已经改变了答案！var url='/Home/TotalAssets？totalProperty='+totalProperty+'&liability='+liability；将实际导航到另一个页面，并将totalproperty和Responsibility作为url中的参数发送，对吗？对于我来说，总资产也出现在同一页中，其中totalproperty（表格1）和Responsibility（表格2）出现在由totalproperty和Responsibility组成的两个表格中。与totalassets位于同一页面中的另一个表。URL将转到Home controller和totalassets操作，发布totalProperty和Responsibility参数。

[HttpPost]
public ActionResult TotalAssets(string totalProperty, string liability)
{
   return Json("Your result here", JsonRequestBehavior.AllowGet);
}

//Sent and handle..
$.ajax({
 type: 'POST',
 url: '@Url.Action("TotalAssets", "Home")',
 contentType: 'application/json',
 data: data,
 success: function() {
   if (response.success) 
    {
        alert(request.response);
    } 
    else {
        alert('Look into it again..');
    }     
 },
error: function() {
   alert('Error');
},
});

    document.getElementById("totalProperty").onchange = function() 
    { 
        PreProcess();
    }

    document.getElementById("liability").onchange = function() 
    { 
        PreProcess();
    }

    function PreProcess()
    {
        let totalProperty = 0;
        let liability = 0;

        totalProperty = document.getElementById("totalProperty").value;
        liability = document.getElementById("liability").value;

        //When values are both set, POST both values to the server..
        if (totalProperty !== '' && totalProperty !== 0 && liability !== '' && liability !== 0) {
            Process(totalProperty, liability);
        }
    }

function Process(totalProperty, liability) 
{
var url = '/Home/TotalAssets?totalProperty=' + totalProperty + '&liability=' 
 + liability;
var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == XMLHttpRequest.DONE) { 
       if (xmlhttp.status == 200) {
           var result = xmlhttp.responseText;
           //Do something with the result
       }
       else {
           alert('Something went wrong: ' + xmlhttp.status);
       }
    }
};

xmlhttp.open("POST", url, true);
xmlhttp.send();
}