Search box and asp-route - asp.net-mvc

I have just added search box to an index view
<form asp-action="Index" asp-route-account="#Model.First().AccountId" method="get">
<div class="form-actions ">
<p>
<input id="searchStringId" type="text" name="searchString" value="#ViewData["currentFilter"]" />
<input type="submit" value="Search" class="btn btn-primary">
<a asp-action="Index" asp-route-account="#Model.First().AccountId">Back to Full List</a>
</p>
</div>
</form>
This gives me:
https://localhost:44377/MainUsers/Funds?searchString=aldi
But I need
https://localhost:44377/MainUsers/Funds?account=1&&searchString=aldi In other words I need the search string to also include the route id.
Any ideas?

I need the search string to also include the route id. Any ideas?
You can try to achieve the requirement by using a hidden input field as below.
<input name="account" type="hidden" value="#Model.First().AccountId" />
<input id="searchStringId" type="text" name="searchString" value="#ViewData["currentFilter"]" />
Test Result

Related

Using ajax in thymleaf, update only part of form

I use SpringBoot, Thymeleaf.
I want to update the value only for part of form in update page.
<form id="form" class="needs-validation col-sm-6" th:action="#{'/user/edit/' + ${userInfo.id}}" th:object="${userInfo}" method="post" novalidate>
<input type="hidden" name="_method" value="put"/>
<input type="hidden" name="id" th:value="${userInfo.id}"/>
<div class="form-group">
<label for="name">Name</label>
<h4 id="name" th:text="${userInfo.name}" th:value="${userInfo.name}"></h4>
<input type="hidden" name="name" th:value="${userInfo.name}"/>
</div>
<hr>
<div class="form-group">
<label for="nickname">Nickname</label>
<input id="nickname" type="text" name="nickname" th:value="${userInfo.nickname}" placeholder="enter nickname" required minlength="2">
</div>
<hr>
<div class="form-group">
<label for="volunteerTime">Volunteer Time</label>
<span id="volunteerTime" th:text="${userInfo.volunteerTime}+'hour'" name="volunteerTime" th:value="${userInfo.volunteerTime}"></span>
<input type="text" size="5px" placeholder="hour"/>
<button type="button" name="action" value="plus" onclick="ajax()">plus</button>
<button type="button" name="action" value="minus" onclick="ajax()">minus</button>
</div>
<div class="form-group">
<input type="submit" value="update">
</div>
</form>
The "volunteerTime" section of the above code seeks to update and show values added to existing data according to the number entered.
The same goes for Minus.

How to submit form with dynamical added textbox in div MVC.?

How to submit form with dynamical added texbox in div MVC.
Hi,
I want to submit a form which a textbox (full name),age ,(Phone no,phonenotype)
User can add n no. of phone no,phonetype eg.
Name -michale
age- 27
Phone:989878767 phonetype - mobile
Phone 022787656 phonetype- office
I want to submit this form to save the data in the database.
But in formcollection phone,phonetype is coming as separate array .
Hence unable to find which phone no. is mobile or office.
A dirty way:
use a name concatenated with a number:
<body> <div id="listPhones">
<div>
<input type="text" name="phone00"/><input type="text" name="phonetype00"/>
</div>
</div>
<bouton onclick="addPhone()">More</bouton>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.3.min.js"> </script>
<script type="text/javascript">
function addPhone() {
var nbr_phone = $("#listPhones").children().length;
$("#listPhones").append("<div><input type='text' name='phone" + nbr_phone + "'/><input type='text' name='phonetype"+ nbr_phone + "'/></div>"); } </script>
</body>
How are you constructing the payload you're submitting?
You can POST JSON - e.g.
{"name":"foo", "age":"123", "phone":[{"type":"mobile", "no":"12345"}, {"type":"home", "no":"345678"}]}
If you're building <input />s, then something like this:
<ul>
<li>Name: <input type="text" name="name" /></li>
<li>Age: <input type="text" name="age" /></li>
<li>Phone type:
<input type="radio" name="phone[0][type]" value="mobile" /> Mobile
<input type="radio" name="phone[0][type]" value="home" /> Home
</li>
<li>Phone: <input type="text" name="phone[0][no]" /></li>
<li>Phone type:
<input type="radio" name="phone[1][type]" value="mobile" /> Mobile
<input type="radio" name="phone[1][type]" value="home" /> Home
</li>
<li>Phone: <input type="text" name="phone[1][no]" /></li>
</ul>
<input type="submit" value="go" />
Hth.

Why does "<input id='id' type=text name='id' value='H123'>" not get "POST"ed by FormData

When I submit the following form
<form name="fileUpload" id="fileUpload" method="post" action="javascript:void(0);" enctype="multipart/form-data">
<input id='id' type=text name='id' value='H123'>
<div class="file_browser">
<input type="file" name="multiple_files[]" id="_multiple_files" class="hide_broswe" multiple />
</div>
<div class="file_upload">
<input type="submit" value="Upload" class="upload_button" />
</div>
</form>
The files[] get uploaded OK but input "#id" is not in the $_POST array.
I need it because I want to pass the name of the directory that the images are to be stored in.
I notice that you are missing quotation marks around 'text' in
<input id='id' type=text name='id' value='H123'>
Which should be:
<input id='id' type='text' name='id' value='H123'>
Besides that I can't see any obvious reason why it shouldn't work.

How to make SignUp/Login action in one form

I working on my first ASP.net MVC project and and i got some problems using multiple buttons in one form.
When my user type username&password and then hit login means it will go to welcome page
if user try to Sign Up means it will go to another form field to get Personal information.
and finally all given information need to store in database and redirect user to welcome page .
#using (Html.BeginForm("about", "home", FormMethod.Post, new { #id = "msform" }))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary()
<!-- progressbar -->
<ul id="progressbar">
<li class="active"></li>
<li></li>
<li></li>
</ul>
<!-- fieldsets -->
<fieldset>
<h2 class="fs-title">Create your account</h2>
<h3 class="fs-subtitle">Take 60 Seconds With Us</h3>
<input type="text" name="UsersName" placeholder="Username" />
<input type="password" name="Passsword" placeholder="Password" />
<input type="button" name="next" class="next action-button" value="Sign Up" />
<input type="button" name="next" class="nexts action-login" value="Log In" />
<input type="submit" value="+" />
</fieldset>
<fieldset>
<h2 class="fs-title">Personal Information</h2>
<h3 class="fs-subtitle">We will never share</h3>
<input type="text" name="phone" placeholder="Email" />
<input type="text" name="phone" placeholder="Phone Number" />
<input type="text" name="date" placeholder="Date of Birth" />
<input type="text" name="gender" placeholder="Gender" />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<h2 class="fs-title">Make SomeOne Alive</h2>
<h3 class="fs-subtitle">A donor today! A hero tommorow!</h3>
<input type="text" name="fname" placeholder="Blood Group" />
<input type="text" name="lname" placeholder="Are You ?" />
<input type="text" name="phone" placeholder="State" />
<input type="text" name="phone" placeholder="City" />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="submit" name="submit" class="action-button" value="Submit" />
</fieldset>
}
But now that I have a login button placed on my view form, I'm totally lost. I don't know how to make when user click login button means it will redirect ,if signUp means it will redirect to another form. How to implement the form
Give your button names, and then test for their existence in the posted data server-side. Only the one that is clicked will be there:
<button type="submit" name="_SignUp">Sign Up</button>
<button type="submit" name="_LogIn">Log In</button>
Then, in your action:
if (Request.Unvalidated["_SignUp"] != null)
{
// do sign up
}
if (Request.Unvalidated["_LogIn"] != null)
{
// do log in
}
Or, you can alternatively just divine the user's intention, by attempting to retrieve the user object to sign them in, and if you get no match, then doing the signup instead. However, that pretty much makes the buttons unimportant and could result in the user clicking "Sign Up" and actually being logged in, instead, or vice versa. It doesn't really matter, but it's better to manage user's expectations. If they think they don't have an account, but actually do, they might want to know that.

Jquery Mobile Dialog with Form

I have a JQuery Mobile dialog with a form on it:
<form action="send" method="post">
<input type="text"/>
<input type="submit" />
</form>
What I want is that when the form is submitted, I just want to close the dialog or go back to the previous page. How to do it with JQM.
Try adjust next sample to your solution:
<div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all">
<form>
<div style="padding:10px 20px;">
<h3>Please sign in</h3>
<label for="un" class="ui-hidden-accessible">Username:</label>
<input type="text" name="user" id="un" value="" placeholder="username" data-theme="a" />
<label for="pw" class="ui-hidden-accessible">Password:</label>
<input type="password" name="pass" id="pw" value="" placeholder="password" data-theme="a" />
<button type="submit" data-theme="b">Sign in</button>
</div>
</form>
</div>

Resources