Asp.NET Core post form from a layout page to a child page

I an new to ASP.NET CORE Razor Pages & MVC, but very familiar with WebForms (so bear with me). I am trying to create a web site using Razor Pages. I have a layout pay that contains the main navbar and footer. In the navbar has simple search controls where a user can enter a 2 values, and click the search button. I have a child page that handles the search (and also has more expanded search functionality)

How can go about passing the values from the layout page controls and redirecting them to the child page. I have searched around and come up with this, but it doesn't seem to be working? Am i way off base?

 @using (Html.BeginForm("~/v1/Agent/Search", "RemoteSearch", FormMethod.Post, new { @class = "form-inline my-2 my-lg-0" }))
            {
                SearchModel searchModel = new SearchModel();
                @Html.AntiForgeryToken();
                @Html.DropDownListFor(x => searchModel.searchID, new SelectList(AccountSearch.GetSearches(), "searchID", "name"), htmlAttributes: new { @class = "form-control mr-sm-2" });
                @Html.TextBoxFor(x => searchModel.searchValue1, htmlAttributes: new { @class = "form-control mr-sm-2" });
                <button type="submit" class="btn btn-secondary my-2 my-sm-0">Search</button>
            }

Open in new window

Hi,

It would be helpful if you would show the code of the action.

A few questions for you.

Is your "RemoteSearch" action an MVC controller or and API Controller?
Do you expect the page to reload on submit?

From what i see in your code, the page should load when submiting the form. I can only guess that your issue is that the values posted are not bound to the parameters of your Action.

This is where the code of your Action would be helpful, but i will try to give you some hints anyway.

First of all a good idea would be to see what is actually being posted to the server. A good way for doing that is using your browser's console. For instance, on Firefox press F12 and go to the network tab. Make sure that you click on "Persist Logs" and do your search as normal. When the page loads, check all the posts that have been made. One of them will be the form submition.

When you do that, check how were the values posted. From what i see you should see that the names of the properties are in the form of "searchModel.searchID" and "searchModel.searchValue1". This implies that your Action should handle this form, but apparently it is not.

There are a few choises here.

One is to manipulate how the form is being submitted. The helpers you have used are going to create the respective elements in html adding a name attribute which will be the same as the expression you have used in the first argument. so this:

@Html.DropDownListFor(x => searchModel.searchID, new SelectList(AccountSearch.GetSearches(), "searchID", "name"), htmlAttributes: new { @class = "form-control mr-sm-2" });

Open in new window

would be renderes to something like this:

<select name="searchModel.searchID" class = "form-control mr-sm-2">
<option>.....
</select>

Open in new window

To be honest, "searchModel.searchID" may be rendered as "searchModel_searchID", but that is not a big difference for your case.
In order to make this as you are expecting is to make sure the name is sent as you would expect. In order to do so, in the htmlAttributes add the name as well (make note of the upper case in the first letter):

@Html.DropDownListFor(x => searchModel.searchID, new SelectList(AccountSearch.GetSearches(), "searchID", "name"), htmlAttributes: new { @class = "form-control mr-sm-2", Name="searchID" });

Open in new window

That would render the element with a name = "searchId"

The above way would help you if your Action was declared as this:

public ActionResult Search(int searchID, string searchValue1)

Open in new window

Another thing you could do, which would also be better if the number of arguments would increase) would be changing the action into somthing like this:

public ActionResult Search(SearchModel searchModel)

Open in new window

Then it expects a class instead of individual values. Of course you would have to add a SearchModel definition in your Models folder (or anywhere else) like the following:

public class SearchModel 
{
public int SearchId {get;set;}
public string SearchValue1 {get;set;}
}

Open in new window

One last comment is that i am not sure what you expect with this "~/v1/Agent/Search". In general this should be the name of the action you want to call and the next argument should be the name of the controller.

So whejn you have this setup:

public class RemoteSearchController: Controller
{
   public ActionResult Search()
   {
   }
}

Open in new window

you would write the form like this:

@using (Html.BeginForm("Search", "RemoteSearch", FormMethod.Post, new { @class = "form-inline my-2 my-lg-0" }))

Open in new window

I need to point out that i am not very much into .Net Core, but i think the principals are the same.

Let me know how it goes,
Giannis

Asp.NET Core post form from a layout page to a child page

Who is Participating?