How to give inputs as a parameter to an action method in MVC5?

Question

I have an MVC5 app, and I have a view model defined like this:

public class RequestViewModel
{
    [Required(ErrorMessage = "Please select a state")]
    [Display(Name = "State")]
    public int StateID { get; set; }

    [Required(ErrorMessage = "Please enter a zip code")]
    [Display(Name = "Zip")]
    public string ZipCode { get; set; }

    [Required(ErrorMessage = "Please choose a service")]
    [Display(Name = "Service")]
    public string ServiceName { get; set; }

    public byte[] ImageData { get; set; }

    public string ImageMimeType { get; set; }

    public byte[] VideoData { get; set; }

    public string VideoMimeType { get; set; }
}

I'm calling this view model, from an action defined like this:

public ActionResult ServiceRequest(RequestViewModel rvm, HttpPostedFileBase image = null, HttpPostedFileBase video = null)
{
    ...
}

So, the point is that in my _Layout.cshtml file I have two input fields, and an "a href", and the thing is when someone presses the object containing the href, I want to take the input of those two fields, and call the above action method. Here is the part from my _Layout.cshtml.

<div class="input-top">
     <a href='@Url.Action("ServiceRequest", "Home", new { rvm.ZipCode = homeZipCode, rvm.ServiceName = homeService })'><img src="~/Content/img/GOBtn.png" class="gobtn-position"></a>
     <input id="homeZipCode" type="text" class="form-control input-position-2" placeholder="ZIP">
     <input id="homeService"  type="text" class="form-control input-position-1" placeholder="What do you need done today?">
</div>

I wrote a code like this one, but it shows me error in the part of new { rvm.ZipCode = homeZipCode, rvm.ServiceName = homeService }, and I can see that the point is that rvm is not defined anywhere in my _Layout.cshtml file, and therefore it cannot resolve the ZipCode and ServiceName attributes. Any idea, how can I pass the values of those two input fields to my action method?

Answer 1

I think you can define a click handler for anchor tag and pass an Ajax request with the data. It would be easier.

So for example:

• Controller:

  public class ServiceController : Controller    {
  
  public ActionResult ServiceRequest()
  {
      return View();
  }
  
  [HttpPost]
  public ActionResult ServiceRequest(RequestViewModel rvm, HttpPostedFileBase image = null, HttpPostedFileBase video = null)
  {
      throw new NotImplementedException();
  }}
  

• Sample View

@{
    ViewBag.Title = "Index";
}

<script src="~/Scripts/jquery-1.8.2.min.js"></script>

<div class="input-top">
     <a class="Gobtn" href="#"><img src="~/Content/themes/base/images/ui-bg_flat_0_aaaaaa_40x100.png" /></a>
     <input id="homeZipCode" type="text" class="form-control input-position-2" placeholder="ZIP">
     <input id="homeService"  type="text" class="form-control input-position-1" placeholder="What do you need done today?">
</div>

<script>

    $(document).ready(function() {
        $('a.Gobtn').on('click', function (e) {

            e.preventDefault();
            alert('here in');

            debugger;
            // Send an ajax post request with data

            var homeZipCode = $("#homeZipCode").val();
            var homeService = $("#homeService").val();

            var model = { ZipCode: homeZipCode, ServiceName: homeService };

            $.ajax({
                    url: '@Url.Action("ServiceRequest", "Service")',
                    contentType: 'application/json; charset=utf-8',
                    type: 'POST',
                    dataType: 'html',
                    data: JSON.stringify(model)
                })
                .success(function(result) {
                });
        });
    });

</script>

Answer 2

You must Add name attribute for your inputs like :

<div class="input-top">

 <input id="homeZipCode" name="ZipCode /*Your property Name*/" ...>
 <input id="homeService" name="ServiceName"  ...>
<input type="submit" value="ServiceRequest">
</div>

Or use html helpers for it

@using (Html.BeginForm())
{
    @Html.TextBoxFor(model => model.ZipCode)
     @Html.TextBoxFor(model => model.ServiceName)
    <input type="submit" value="ServiceRequest">
}

Answer 3

Please try below code for tag a

<a href='@Url.Action("ServiceRequest", "Home", new { homeZipCode = Model.ZipCode, homeService = Model.ServiceName })'><img src="~/Content/img/GOBtn.png" class="gobtn-position"></a>

'rvm' has no meaning here....