3

I am creating an "advanced input form" with a lot of inputs for searching data. My question is: What is the best way to pass a lot of data from HTML to the controller.

The reason i ask is. Lets say you have this HTML form:

 @using (Html.BeginForm("Loading", "AdvancedSearch"))
    {    
       <input type="text" id="keyword">
       <input type="text" id="keyword1">
       <input type="text" id="keyword2">
       <input type="text" id="keyword3">
       <input type="text" id="keyword4">
       <input type="text" id="keyword5">
       <input type="text" id="keyword6">
       <input type="text" id="keyword7">
       <input type="text" id="keyword8">
       <input type="text" id="keyword9">

       <input type="submit" value="Search" style="width: 150px;" /> 
    }

Then it will be pretty nasty to pass it all to the controller like this (I've got a lot more keywords):

public ActionResult Loading(string keyword1, string keyword2, string keyword3, string keyword4, string keyword5, string6
                         string keyword7, string keyword8, string keyword9){
//do things to the parameters!
return View();
}

So how would you perform this action or would you do it like this?

Thanks!

Ørjan
  • 2,749
  • 2
  • 16
  • 24

3 Answers3

5

Use a model class. Provided the input names match the model properties, the MVC engine will do the mapping for you.

public class Keywords
{
    public string keyword1 { get; set; }
    public string keyword2 { get; set; }
    ///etc...
}

And you action is much simpler:

public ActionResult Loading(Keywords keywords){
    //do things to the parameters!
    var keyword1 = keywords.keyword1;
    return View();
}
DavidG
  • 113,891
  • 12
  • 217
  • 223
  • Fair enough. But how to you get the parameters from the HTML-page to the class? @using (Html.BeginForm("Loading", "AdvancedSearch", new @Model=Keywords) – Ørjan Nov 13 '14 at 12:49
  • I said that in the answer already `MVC engine will do the mapping for you` – DavidG Nov 13 '14 at 12:50
  • Wow, great. Thanks i will try it now and accept the answers as soon as I've tried it! Thank you! – Ørjan Nov 13 '14 at 12:51
  • 1
    Thank you very much it worked at once. I really underestimated the the MVC engine. This was too easy! I already had the class, but created it inside the method instead of using it as parameter! – Ørjan Nov 13 '14 at 12:56
1

I would suggest to use a view model and include a list for your keywords. It is non-sense to add a property for every keyword:

public class Keywords
{
    public List<string> Items { get; set; }
}

public ActionResult Loading(Keywords keywords){ }

Or if possible:

public ActionResult Loading(List<string> keywords){ }

Read some more about it here.

Patrick Hofman
  • 153,850
  • 22
  • 249
  • 325
  • Clever. But would it not be smart to have any keys like a dictionary to give a clue what the different keywords are? – Ørjan Nov 13 '14 at 13:11
  • 1
    If you need to. You could also extend the List to have a custom type with an identifier in it. I think making it a dictionary would be a problem in ASP.NET MVC. – Patrick Hofman Nov 13 '14 at 13:13
  • 1
    Okay! I liked this way, clean and nice and avoid all the properties! Thanks! Haven't been using C# and MVC before, so there's a lot of tips and tricks yet to be learned! :) – Ørjan Nov 13 '14 at 13:18
1

Create a class with those keyword1, keyword2 and so on...

Such as

public class SearchDto
{
    public string Keyword1 { get; set; }
    public string Keyword2 { get; set; }
    public string Keyword3 { get; set; }
    public string Keyword4 { get; set; }
    public string Keyword5 { get; set; }
    public string Keyword6 { get; set; }
    public string Keyword7 { get; set; }
    public string Keyword8 { get; set; }
}

Then ActionResult such as

public ActionResult Loading(SearchDto dto)
{
return View();
}

You can post your data from view.

There is an example Send JSON data via POST (ajax) and receive json response from Controller (MVC) here.

And also here

function search() {
    $.ajax({
        type: "POST",
        url: '@Url.Action("CreateEmail", "Email")',
        data: JSON.stringify({
            Keyword1 : $("#keyword1").val(),
            Keyword2 : $("#keyword2").val(),
            Keyword3 : $("#keyword3").val(),
            Keyword4 : $("#keyword4").val(),
            Keyword5 : $("#keyword5").val(),
            Keyword6 : $("#keyword6").val(),
            Keyword7 : $("#keyword7").val(),
            Keyword8 : $("#keyword8").val(),
        }),
        contentType: "application/json; charset=utf-8",
        async: false,
        dataType: "json",
        success: function (result){
        alert('done');
         }
)};
Community
  • 1
  • 1
cCcik
  • 107
  • 4
  • Thanks for the answer, but DavidG's solution worked very well, so I think I will use that one instead :) – Ørjan Nov 13 '14 at 13:12