MVC submit button is not responding - asp.net

I have the following code which invokes a method called search once the search button is submitted. But the problem rely on that the submit button does not make call to the actionresult search in all cases:
Index page in where it has the form
<section class="search-sec">
<div class="container-fluid">
<form>
<div class="row">
<div class="col-lg-12">
<div class="row">
#using (Html.BeginForm("Search","Home",FormMethod.Post))
{
<div class="col-lg-4 col-md-3 col-sm-12 p-0">
<input type="text" name="SearchTitle" class="form-control search-slt" placeholder="Job Title, Skills, Company!">
</div>
<div class="col-lg-4 col-md-3 col-sm-12 p-0">
<input type="text" class="form-control search-slt" placeholder="Location">
</div>
<div class="col-lg-4 col-md-3 col-sm-12 p-0">
<button type="submit" value="Create" class="btn btn-danger wrn-btn">Search</button>
</div>
}
</div>
</div>
</div>
</form>
</div>
</section>
Home Controller:
public ActionResult Search(string SearchTitle)
{
var result = db.Job.Where(m => m.JobTitle.Contains(SearchTitle)).ToList();
return View(result);
}

add [HttpPost] attribute like this on top of your action
it will fix your issue
[HttpPost]
public ActionResult Search(string SearchTitle)
{
var result = db.Job.Where(m => m.JobTitle.Contains(SearchTitle)).ToList();
return View(result);
}

Moving the Beginform to the top will solve your problem rather than having it inside the row. this will solve the problem.
<section class="search-sec">
#using (Html.BeginForm("Search", "Home", FormMethod.Post))
<div class="container-fluid">
<form>
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-4 col-md-3 col-sm-12 p-0">
<input type="text" name="searchTitle" class="form-control search-slt" placeholder="Job Title, Skills, Company!">
</div>
<div class="col-lg-4 col-md-3 col-sm-12 p-0">
<input type="text" class="form-control search-slt" placeholder="Location">
</div>
<div class="col-lg-4 col-md-3 col-sm-12 p-0">
<button type="submit" value="Create" class="btn btn-danger wrn-btn">Search</button>
</div>
</div>
</div>
</div>
</form>
</div>
}

Related

ASP.NET MVC Html.BeginForm to Insert new database record via ActionMethod

When I press the submit 'Create' button the page refreshes and nothing happens and it's like the form doesn't even call the controller 'SaveProject' actionresult. Nothing is inserted into the database.
I have noticed the URL given in the browser when I click the submit button is "http://localhost:62234/Operations/CreateProjectView?ProjectName=bhihi"
Shouldnt it be SaveProject instead? Why isit not directing it to the correct URL? When I enter the following URL: "http://localhost:62234/Operations/SaveProject?ProjectName=bhihi"
It creates a project and works fine. But for some reason the form is not calling the correct name??
Here is my code:
OperationsController:
public ActionResult CreateProjectView()
{
return View();
}
public ActionResult SaveProject(Project model)
{
try
{
IRISInSiteLiveEntities DB = new IRISInSiteLiveEntities();
Project newproject = new Project();
newproject.ProjectName = model.ProjectName;
DB.Projects.Add(newproject);
DB.SaveChanges();
return RedirectToAction("CreateProjectView");
}
catch(Exception ex)
{
throw ex;
}
}
CreateNewProject View:
#model IRIS.Models.Project
#{
ViewBag.Title = "CreateProjectView";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="page-wrapper nope" style="background-image: url(../assets/images/background/AdobeStock_56278.png); background-size:auto">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-body">
<div class="form-body">
#using (Html.BeginForm("SaveProject", "Operations", FormMethod.Post))
{
<div class="row">
<div class="col-6">
<div class="row">
<div class="col-lg-4 col-sm-6 offset-lg-2">
<label class="control-label">Project Name</label>
</div>
<div class="col-lg-4 col-sm-6">
#Html.TextBoxFor(model => model.ProjectName, new { #class = "form-control", Style = "text-align:center" })
</div>
</div>
<br />
<div class="row">
<div class="col-lg-4 col-sm-6 offset-lg-2">
<label class="control-label">Network Operator</label>
</div>
<div class="col-lg-4 col-sm-6">
</div>
</div>
<br />
<div class="row">
<div class="col-lg-4 col-sm-6 offset-lg-2">
<label class="control-label">Nokia Customer</label>
</div>
<div class="col-lg-4 col-sm-6">
</div>
</div>
<br />
<div class="row">
<div class="col-lg-4 col-sm-6 offset-lg-2">
<label class="control-label">Nokia Project Business Manager</label>
</div>
<div class="col-lg-4 col-sm-6">
</div>
</div>
<br />
<div class="row">
<div class="col-lg-4 col-sm-6 offset-lg-2">
<label class="control-label">Nokia Cost and Progress Manager</label>
</div>
<div class="col-lg-4 col-sm-6">
</div>
</div>
<br />
<div class="row">
<div class="col-lg-4 col-sm-6 offset-lg-2">
<label class="control-label">Nokia Procurement Manager</label>
</div>
<div class="col-lg-4 col-sm-6">
</div>
</div>
</div>
<div class="col-6">
<div class="row">
<div class="col-lg-4 col-sm-6">
<label class="control-label">Nokia PDM</label>
</div>
<div class="col-lg-4 col-sm-6">
</div>
</div>
<br />
<div class="row">
<div class="col-lg-4 col-sm-6">
<label class="control-label">Nokia Project Manager</label>
</div>
<div class="col-lg-4 col-sm-6">
</div>
</div>
<br />
<div class="row">
<div class="col-lg-4 col-sm-6">
<label class="control-label">Nokia Project Engineer</label>
</div>
<div class="col-lg-4 col-sm-6">
</div>
</div>
<br />
<div class="row">
<div class="col-lg-4 col-sm-6">
<label class="control-label">Iris Project No</label>
</div>
<div class="col-lg-4 col-sm-6">
</div>
</div>
<br />
<div class="row">
<div class="col-lg-4 col-sm-6">
<label class="control-label">Iris Project Manager</label>
</div>
<div class="col-lg-4 col-sm-6">
</div>
</div>
<br />
<div class="row">
<div class="col-lg-4 col-sm-6">
<label class="control-label">Iris Project Engineer</label>
</div>
<div class="col-lg-4 col-sm-6">
</div>
</div>
</div>
</div>
<br /><br />
<div class="col-2 offset-lg-1 pull-left">
<div class="input-group">
<input type="submit" class="btn btn-block btn-outline-info" value="Create" style="width:100%; height:50px; padding: 5px" />
</div>
</div>
}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
There are no errors or anything. No exceptions. Thanks.
First of all, You migh wanna use Http decorators in your controller.
[HttpGet]
public IActionResult CreateProjectView()
{
return View();
}
[HttpPost]
public IActionResult CreateProject(Project model)
{
try
{
// This should be your repository.
var DB = new IRISInSiteLiveEntities();
var newProject = new Project
{
ProjectName = model.ProjectName
};
DB.Projects.Add(newproject);
DB.SaveChanges();
return RedirectToAction("CreateProjectView");
}
catch(Exception ex)
{
throw ex;
}
}
And you view should be something like this (this is just your part):
#model IRIS.Models.Project
<form asp-controller="Operations" asp-action="CreateProject" id="operationsForm" method="post">
#Html.AntiForgeryToken()
<div class="form-group">
<label asp-for="ProjectName">Project Name</label>
<input asp-for="ProjectName" class="form-control" />
</div>
<div class="form-group">
<label asp-for="NetworkOperator">NetworkOperator</label>
</div>
...
<div class="form-group">
<input id="submit" type="submit" value="Create" class="btn btn-default">
</div>
</form>
Now, I don't remember exactly, but this is kinda 'newer' razor syntax (I don't use Razor). It looks more like HTML and it's a lot more cleaner. You will have to look up on the Internet for this.
What you also should look is Repository pattern. I asume that IRISInSiteLiveEntities is your repository. This should implement method like CreateProject() so that way you don't write directly from your Controller - that's not the job of the Controller.
So, your Controller should look something like this:
private readonly IRISInSiteLiveEntities m_siteLiveEntities;
[HttpGet]
public IActionResult CreateProjectView()
{
return View();
}
[HttpPost]
public IActionResult CreateProject(Project model)
{
try
{
var newProject = new Project
{
ProjectName = model.ProjectName
};
m_siteLiveEntities.CreateProject(newProject);
return RedirectToAction("CreateProjectView");
}
catch(Exception ex)
{
throw ex;
}
}
And again, look for MVC Architecture design, Repository pattern and even Clean Architecture (Onion Architecture).
When I changed the Layout = to NULL the form worked. When I looked in the _Layout.cshtml the page was enclosed in a tag. Once I removed this the form works. Stupid me.

How could I resize input-group?

I'm creating a jumbotron and trying to put an input-group form to make searches on my website. The problem is when I add the form with input and button and try to resize the form to 100% it doesn't stick together and the input text doesn't resize.
How could I fix this problem ?
trying
<div class="jumbotron">
<div class="row">
<div class="col-md-4">
<div class="img-responsive" style="margin:-50px 0 -20px 20px;">
<img src="~/Imagens/logo.png" />
</div>
</div>
<div class="col-md-4">
#using (Html.BeginForm("view", "Home", FormMethod.Post, new { role = "form" })){
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
<div class="input-group">
<input type="text" class="form-control" placeholder="What do you looking for ?">
<div class="input-group-btn">
<button class="btn glyphicon glyphicon-search"></button>
</div>
</div>
}
</div>
<div class="col-md-4">
#Html.Partial("_LoginPartial")
</div>
</div>
</div><!--jumbotron-->
You have some custom CSS on your page?
maybe this code can be the problem..
take a look:
<div class="jumbotron">
<div class="row">
<div class="col-md-4">
<form>
<div class="input-group">
<input type="text" class="form-control" placeholder="What do you looking for ?">
<div class="input-group-btn">
<button class="btn glyphicon glyphicon-search"></button>
</div>
</div>
</form>
</div>
</div>
https://jsfiddle.net/AlvaroAlves/0jrkhuy0/
Your Bootstrap code works fine, check this pen.
<div class="input-group">
<input type="text" class="form-control" placeholder="What do you looking for ?">
<div class="input-group-btn">
<button class="btn glyphicon glyphicon-search"></button>
</div>
</div>
Most probably some CSS code is interfering with Bootstrap's CSS.

How to set bootstrap form with multi controls aligned at same row (and responsive)

I'd like to draw a table using bootstrap css and looks like this:
After reading many tutorials on internet, I didn't find any examples directly support multi controls aligned as the pictrue above (either using .form-horizontal or .form-inline).
Can anyone show me an example please ?
You can also use grid system without adding any customized styles:
<form>
<div class="row">
<div class="col-md-1 col-sm-1 form-group">
<label>Name</label>
</div>
<div class="col-md-5 col-sm-11 form-group">
<input type="text" class="form-control" />
</div>
<div class="col-md-1 col-sm-1 form-group">
<label>Age</label>
</div>
<div class="col-md-5 col-sm-11 form-group">
<input type="text" class="form-control" />
</div>
</div>
<div class="row">
<div class="col-md-1 col-sm-1 form-group">
<label>Sex</label>
</div>
<div class="col-md-5 col-sm-11 form-group">
<input type="text" class="form-control" />
</div>
<div class="col-md-1 col-sm-1 form-group">
<label>Job</label>
</div>
<div class="col-md-5 col-sm-11 form-group">
<input type="text" class="form-control" />
</div>
</div>
</form>
Results:
large
small
Smallest
#ineztia: try this source code and let me know.
.form-row > .control-label {
margin-top: 5px;
}
.form-row > .input-text {
margin-bottom: 5px;
}
#media screen (min-width: 768px) {
.form-row > .control-label {
margin-top: 0;
}
.form-row > .input-text {
margin-bottom: 0;
}
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-12">
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>Form Name</legend>
<!-- Text input-->
<div class="form-group">
<div class="form-row">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Name</label>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-9 input-text">
<input type="text" placeholder="Name..." class="form-control input-md">
</div>
</div>
<div class="form-row">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Age</label>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-9 input-text">
<input type="text" placeholder="Age..." class="form-control input-md">
</div>
</div>
</div>
<!--/form-group-->
<!-- Text input-->
<div class="form-group">
<div class="form-row">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Sex</label>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-9 input-text">
<input type="text" placeholder="Sex..." class="form-control input-md">
</div>
</div>
<div class="form-row">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Job</label>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-9 input-text">
<input type="text" placeholder="Job..." class="form-control input-md">
</div>
</div>
</div>
<!--/form-group-->
<!-- Button (Double) -->
<div class="form-group text-right">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<button name="btn-ok" class="btn btn-cancel btn-success">OK</button>
<button name="btn-cancel" class="btn btn-cancel btn-danger">Cancel</button>
</div>
</div>
<!--/form-group-->
</fieldset>
<!--/fieldset-->
</form>
<!--/form-->
</div>
</div>
</div>

How do I center everything inside 2 bootstrap columns? (col-md-6 and col-md-6)?

Basically I have something like this
<div class="container">
<div class="row">
<div class="col-md-6>
<form class="form-group-sm">
<input />
<button type="submit"></button>
</form>
</div>
</div>
<div class="col-md-6>
<form class="form-group-sm">
<input />
<button type="submit"></button>
</form>
</div>>
</div>
2 columns side by side, I'm trying to figure out a way to center the forms, input, and button inside each column but cant seem too figure out how.
<form method="POST" action="./createProduct" class="form-group-sm" >
<div class="form-group">
<label for="t" class="col-md-8 control-label">Product Type</label>
<div class="col-md-8">
<input name="productType" id="t"/>
</div>
</div>
<div class="form-group">
<label for="sn" class="col-md-8 control-label">Material Cost PerSqFoot</label>
<div class="col-md-8">
<input name="matCostSqf" id="sn"/>
</div>
</div>
<div class="form-group">
<label for="snum" class="col-md-8 control-label">Labor Cost PerSqFoot</label>
<div class="col-md-8">
<input name="laborCostSqf" id="snum" />
</div>
</div>
<br />
<div class="col-md-8">
<br />
<button class=" btn btn-danger btn-lg center-block" type="submit">Submit</button>
</div>
</form>
Twitter Bootstrap has a default class for that called text-center.
Just add the text-center class to your col- divs like this:
<div class="col-md-6 text-center">
-- your content --
</div>
P.S. You forgot to properly close the column divs. Do make sure you close them always
Your markup contains some errors like an extra closing div and a missing double cotes for the class attribute : class="col-md-6>
here is the solution you can use the bootstrap class "text-center"
<div class="container">
<div class="row">
<div class="col-md-6 text-center">
<form class="form-group-sm">
<input />
<button type="submit">Submit</button>
</form>
</div>
<div class="col-md-6 text-center">
<form class="form-group-sm">
<input />
<button type="submit">Submit</button>
</form>
</div>
</div>
here is a pen

Bootstrap 3.3.6 align right

Till now I was using Bootstrap 3.3.1, everything was fine.
http://jsfiddle.net/PKrUC/256/
Then I have to update Bootstrap to the latest version 3.3.6:
http://jsfiddle.net/PKrUC/257/
the buttons are on the wrong side. align="right" seems not working anymore.
I used the files from https://cdnjs.com/libraries/twitter-bootstrap/3.3.6 as extern resources for the jsfiddle.
Anyone know why is this happening and how can I fix it?
You can use 'pull-right' in the individual button classes'
[1]: http://jsfiddle.net/PKrUC/260/
You can simply fix by adding .text-right in to parent element
Fix: http://jsfiddle.net/eycfyvx9/
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="col-md-4 col-md-offset-4">
<form class="form-horizontal" method="POST" id="packet_form">
<div class="panel panel-info">
<div class="panel-heading">
<div class="row">
<div class="col-xs-12">
<h4 class="pull-left">New Packet</h4>
</div>
</div>
</div>
<div class="panel-body" id="panel_user">
<div class="form-group">
<label class="col-xs-3 control-label" for="date">Expire-Date</label>
<div class="col-xs-6">
<input type="date" id="date" name="date" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label" for="licence_text">Lizence:</label>
<div class="col-xs-9">
<textarea class="form-control" id="licence_text" name="licence_text" rows="20"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-xs-12 text-right">
<a class="btn btn-danger" href="javascript:window.history.back()">Back</a>
<button type="submit" class="btn btn-success" formaction="add_packet.php">Save</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>

Resources