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
– Hans Keﬆing, Commented Mar 6, 2016 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
– csharpfolk, Commented Mar 6, 2016 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: <form>. 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
– Darin Dimitrov, Commented Mar 6, 2016 at 16:22

Steve Harris · Accepted Answer · 2016-03-06 16:15:07Z

2

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.

answered Mar 6, 2016 at 16:15

Steve Harris

5,1571 gold badge13 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Erik Philips Over a year ago

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.

Steve Harris Over a year ago

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.

Erik Philips · Accepted Answer · 2016-03-08 04:13:02Z

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.

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related