Question

我想举一个例子来解释我的问题。例如，我有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而且我无法从我阅读和观看的文件中得到我的意思。谢谢。

Answer 1

这应该可以帮助你：

这假设您在Controller文件夹中有一个SearchController，View文件夹中有一个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);
   }
}

查看

@model string

@* Skipped Input Fields *@
<input id="txtResults" type="text" Value="@Model ?? String.Empty" />

注意：这不会重新填充txtA，txtB，txtC字段。如果要重新填充它们，则需要创建一个正确的Model类（而不是使用字符串），并通过Controller Index(string txtA, string txtB, string txtC)方法将其传递给视图。

Answer 2

试试这个脚本：

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

更改按钮类型：

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

请尝试此演示：插入所有三个文本框值，看看会发生什么

http://jsfiddle.net/E89P6/

Answer 3

我认为你的任务有三个选择：

<强> 1。将数据传递给具有提交表单的服务器

为此，您需要为输入分配名称，用<form>标记包装并提交按钮，并创建asp.net mvc操作以接收您的值并发回结果;

<强> 实施例

视图模型

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

<强> 2。使用ajax请求将数据传递到服务器

为此，您可以使用<form>标记包装您的输入以方便（它不是必需的），并将其发送到服务器。

<强> 实施例 所有都保持不变，就像第一个例子中一样，只是改变邮政行动：

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

第3。在javascript中计算或求和

不要向服务器发送任何数据并在客户端进行计算。但要谨慎，因为javascript有时可能会对浮点数的数学很棘手。进入控制台0.2 + 0.1，您将看到我的意思。

<强> 实施例

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

MVC 4 Razor Engine通过单击按钮从文本框获取数据并发送另一个文本框

3 个答案: