Question

net mvc 5应用程序，为此我使用bootstrap，因为它看起来很好。

我不想用于输入和搜索按钮

@using (Html.BeginForm("...

我是否可以在没有控制器的情况下控制html标签。例如，这是我的index.cshtml

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="container">
    <div class="row">
        <h2>Suche</h2>
        <div id="custom-search-input">
            <div class="input-group col-md-12">
                <input type="text" class="  search-query form-control" placeholder="Search" />
                <span class="input-group-btn">
                    <button class="btn btn-danger" type="button">
                        <span class=" glyphicon glyphicon-search"></span>
                    </button>
                </span>
            </div>
        </div>
    </div>
</div>

我想如果点击“搜索”按钮，我会收到包含输入字段文本的消息。

这是控制器：

public ActionResult Search(string value)
{
    //listofUsers is a arraylist of all users that found^^

    return View(listofUsers);
}

我怎么能这样做？ :)

Answer 1

添加div以显示结果：

    <div id="custom-search-input">
        <div class="input-group col-md-12">
            <input type="text" class="  search-query form-control" placeholder="Search" />
            <span class="input-group-btn">
                <button class="btn btn-danger" type="button">
                    <span class=" glyphicon glyphicon-search"></span>
                </button>
            </span>
        </div>
    </div>
    <div class="custom-search-result"></div>

然后在脚本标记或链接的js文件中：

$(document).ready(function () {
    $('.custom-search-input').each(function () {
        var sinput = $(this);
        var svalue = sinput.find('input');
        var sresult = sinput.next('.custom-search-result');
        sinput.find('button').click(function () {
            $.ajax({
                url: '/ControllerName/Search?value=' + svalue.val(),
                type: 'GET'
            }).done(function (result) {
                sresult.html(result);
            });
        });
    });
});

这是一个没有错误处理的基本示例。

Answer 2

首先，我强烈建议您阅读Philip Walton (Google) - Decoupling your HTML, CSS and Javascript，这非常好。

这里我将如何使用MVC充分发挥潜力。

型号：

// Extensible Programming
// Using a string limits additional features
// Future proofing via a class that takes 2 minutes to create
public class GlobalSearch
{
  public string SearchTerms { get; set; }
}

查看：

@Model GlobalSearch
<div class="container">
  <div class="row">
    <h2>Suche</h2>
    <div id="custom-search-input">
      @using (Html.BeginForm("Search"))
      {
      <div class="input-group col-md-12">
        @Html.TextBoxFor(m => m.SearchTerms, new { 
          @class="search-query form-control",
          placeholder="Search" })
        <span class="input-group-btn">
          <button class="btn btn-danger" type="button">
            <span class=" glyphicon glyphicon-search js-form-submit"></span>
          </button>
        </span>
      </div>
      }
    </div>
  </div>
</div>

控制器：

// Strongly Typed Class is Returned
public ActionResult Search(GlobalSearch search)
{
  return View(listofUsers);
}

以下脚本将需要这个名为form2js的奇妙脚本，它可以正确地将MVC（数组，列表等）生成的任何强类型表单转换为正确的ModelBinded的Json。

$(document).ready(function() {
  ('.js-form-submit').on('click', function() {
    var $form = $(this).closest('form');
    var json = form2js($form);
    var ajaxSettings = {
      url: $form.attr('action'),
      type: $form.attr('method'),
      data: json,
      contentType: "application/json",
    }
    $.ajax(ajaxSettings)
      .done()
      .always()
      .fail();
  });
});

当然，这可以很容易地抽象到它自己的javascript类/命名空间中，它返回承诺，并且可以在任何只有一个带有类js-form-submit的按钮的表单上重用，而不是不断地重写{{1每次都为了不同的形式一遍又一遍。

如何使用html标签进行输入并在没有Html.BeginForm的asp.net mvc 5中提交？

2 个答案: