Asp.net mvc 4 MVC4Razor引擎从文本框获取数据，并通过单击按钮发送另一个文本框

我想举例说明我的问题。例如，我有3个输入位置

<input id="txtA" type="text" class="search-text" />
<input id="txtB" type="text" class="search-text" />
<input id="txtC" type="text" class="search-text" />

我有提交按钮

<input id="hesapla" type="submit" value="Hesap" name="but" />

还有一个文本区域显示结果

<input id="Text1" type="text" class="search-text" />

---

让我们来回答我的问题-用户将在这些输入区域输入数字，当用户单击按钮时，将在输入的数字之间进行计算-例如求和-结果将显示在最新的文本区域。我认为这很简单，但我刚刚开始mvc，我无法从我阅读和观看的文档中理解我的意思。谢谢。

这应该可以帮你上路了：

假设控制器文件夹中有一个SearchController，视图文件夹中有一个Search.cshtml，url为localhost/Search

public class SearchController
{
   ///GET
   public ActionResult Index(){
       return View();
   }

   ///POST
   public ActionResult Index(string txtA, string txtB, string txtC)
   {
       //perform calculation and assign to string result
       string result = "Search Results!";
       return View (result);
   }
}

看法

@模型字符串
@*跳过的输入字段*@

注意：这不会重新填充txtA、txtB、txtC字段。如果要重新填充这些对象，需要创建一个适当的

模型

类（而不是使用字符串），并通过控制器

索引（字符串txtA、字符串txtB、字符串txtC）

方法将其传递给视图。

尝试以下脚本：

 <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $("#hesapla").click(function () {
                var t1 = $("#txtA");
                var t2 = $("#txtB");
                var t3 = $("#txtC");
                var Result = 0;
                var aa = parseFloat(t1.val());
                var bb = parseFloat(t2.val())
                var cc = parseFloat(t3.val())
                Result = aa + bb + cc ;
                $("#Text1").val(Result);
            });
        });
    </script>

---

我为您的任务提供了三种选择：

1。使用提交的表单将数据传递到服务器

为此，您需要为输入指定名称，将它们包装起来，并使用

标记提交按钮，创建asp.net mvc操作，以接收您的值并发送回结果

示例：

视图模型

看法

并添加向服务器发送数据的脚本：

<script>
    $(function() {
        $("#hesapla").click(function (e) {
            e.preventDefault();
            var callback = function(response) {
                $("#Text1").val(response.result);
            }
            $.post("@Url.Action("Sum")", $("#sumForm").serialize(), callback, 'json');
        });
    })
</script>

---

您是想通过JavaScript进行计算，还是想将结果发布回服务器，以便在那里进行计算？抱歉，我忘了指出这一点。我不想使用javascript，我想在服务器端使用。你来自web表单背景吗？是的。在这方面，我认为没有txtA.text，是吗？所以MVC范式在这方面与web表单非常不同。当然，这个例子在web表单中非常简单，将一个按钮事件处理程序附加到设置Text1.Text的submit按钮。MVC没有按钮事件处理程序，而是只有HTTP事件（get、post等）。因此，您的输入按钮将导致Post事件。您可以在控制器中创建一个重载来捕获Post事件，然后创建一个新模型来传递给视图（同一视图或新视图（即SearchResultsView））。然后使用Razor语法在视图中进行内联数据绑定。@Amit是的，谢谢，我写了一条关于javascript的错误语句。刚刚纠正了它。

<input id="hesapla" type="button" value="Hesap" name="but" />

http://jsfiddle.net/E89P6/

public class CalcModelViewModel
{
    public CalcModelViewModel() : this(0) { }
    public CalcModelViewModel(int countOfInputs) 
    {
        Inputs = Enumerable.Repeat(0m, countOfInputs);
    }
    public IEnumerable<decimal> Inputs { get; set; }
    public decimal Result { get; set; }
}

public ActionResult Sum()
{
    return View(new CalcModelViewModel(3));
}

[HttpPost]
public ActionResult Sum(decimal[] numbers)
{
    return View(new CalcModelViewModel() { Inputs = numbers, Result = numbers.Sum() });
}

@model Mvc4Application.Controllers.CalcModelViewModel
<form id="sumForm" action="@Url.Action("Sum")" method="POST">
    @foreach (var num in Model.Inputs)
    {
        <input type="text" class="search-text" name="numbers" value="@num" />
    }

    <input id="hesapla" type="submit" value="Hesap" name="but" />
</form>

<input id="Text1" type="text" class="search-text" value="@Model.Result" />

[HttpPost]
public ActionResult Sum(decimal[] numbers)
{
    return Json(new { result = numbers.Sum() });
}

<script>
    $(function() {
        $("#hesapla").click(function (e) {
            e.preventDefault();
            var callback = function(response) {
                $("#Text1").val(response.result);
            }
            $.post("@Url.Action("Sum")", $("#sumForm").serialize(), callback, 'json');
        });
    })
</script>

$(function() {
    $("#hesapla").click(function (e) {
        e.preventDefault();
        var sum = 0;
        $('input[name=numbers]').each(function() {
            sum += parseFloat($(this).val());
        });
        $("#Text1").val(sum);
    });
})