How I can use html tags for input and submit in asp.net mvc 5 without Html.BeginForm?

Question

net mvc 5 application and for this I use bootstrap because it looks fine.

I don't want to use for an input and a searchbutton the

@using (Html.BeginForm("...

Can I control the html tags without this from my controller. For example here is my 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>

I want if I click on the Searchbutton I get a message with the text from the inputfield.

Here is the Controller:

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

    return View(listofUsers);
}

How I can do this? :)

Maybe you want to explain *why* you don't want to use that BeginForm? — Hans Keﬆing, Mar 06 '16 at 14:36
Use jQuery to handle button on-click event and use ajax to send request to server. If you want to know how mvc gets values form form, then it boils down to properly set `name` attributes of input elements. — csharpfolk, Mar 06 '16 at 14:54
You can't do this using only HTML tags. Unless of course you use the html tag that is designed exactly for this purpose: `
`. But since for some unknown reason you don't want to use the tool that is designed for this purpose you will need to write javascript to wire the sending of the data to the server. You can use AJAX or make a standard redirect using `window.location.href`. — Darin Dimitrov, Mar 06 '16 at 16:22

score 2 · Answer 1 · answered Mar 06 '16 at 16:15

Add a div to show the result:

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

Then in a script tag or a linked js file:

$(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);
            });
        });
    });
});

This is a basic example with no error handling.

As much as this works, it's fragile code. The javascript in this instance is tightly coupled with Html that is not rendered by HtmlHelpers and the Ajax call is tightly coupled to the controller method in a way that any change in any of these results in a runtime error that will be extremely hard to track down (ie change `value` in controller to `searchTerm` and everything breaks, or in the case above where the JS is looking for `input` if someone else adds an input inside this element, it breaks. — Erik Philips, Mar 08 '16 at 03:37
Such errors can be easily avoided. The input can be given a name and the function can filter on that. Like I said, this is a basic example. There is much that can be done to improve it. — Steve Harris, Mar 08 '16 at 07:38

Erik Philips · Answer 2 · 2016-03-08T04:13:02.523

First I highly recommend reading Philip Walton (Google) - Decoupling your HTML, CSS and Javascript, it's extremely good.

Here how I would use MVC to it's full potential.

Model:

// 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; }
}

View:

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

Controller:

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

The following script will require this fantastic script called form2js which correctly converts any strongly-typed forms generated by MVC (arrays, lists etc) into Json that will be ModelBinded correctly.

$(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();
  });
});

Of course this could be easily abstract into it's own javascript class/namespace that returns the promise and reusable on any form that simply has a button with the class js-form-submit instead of continually rewriting $.ajax over and over again each time for different forms.

The OP specified that Html.BeginForm was not wanted. I assume they do not want a begin and end form tag either. — Steve Harris, Mar 08 '16 at 07:40

How I can use html tags for input and submit in asp.net mvc 5 without Html.BeginForm?

2 Answers2