I am trying to create a Bootstrap modal pop up "Ticket successfully created" once you submit a form which posts data through to IActionResult to add to database. However my modal is like transparent with just text and I'm also getting a runtime error of : Obj ref not set to an instance of object
I have a feeling that modal popup is causing the passing of data back to the controller to not work. What is the way around this?
GetTicket view
#model Project.HelpDeskViewModel
<fieldset>
#using (Html.BeginForm())
{
<div class="container">
<div class="form-group">
<div class="row m-4 text-center">
<div class="col-4">
</div>
<div class="col-4">
<h2 style="text-align:center;font-weight:bold">Get A Ticket</h2>
</div>
</div>
</div>
<div class="form-group">
<div class="row m-3">
<div class="col-4" style="text-align:left">
#Html.LabelFor(m => m.category)
</div>
<div class="col-4">
#Html.DropDownListFor(m => m.category, new SelectList(Model.categoryList, "Value", "Text"), "Select category", new { #class = "form-control" })#Html.ValidationMessageFor(model => model.category,
"", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="form-group">
<div class="row m-3">
<div class="col-4" style="text-align:left">
#Html.LabelFor(m => m.ticketDescription)
</div>
<div class="col-4">
#Html.TextAreaFor(m => m.ticketDescription, new { #class = "form-control" })#Html.ValidationMessageFor(model => model.ticketDescription,
"", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="form-group">
#*Modal for ticket creation*#
<div class="modal" id="MyModal" role="dialog">
<div class="modal-dialog">
<div class="model-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h4>Ticket Created</h4>
</div>
<div class="modal-body">
<p> Your Helpdesk ticket has been succesfully submitted</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal"> close</button>
</div>
</div>
</div>
</div>
</div>
<div class="row m-3">
<div class="col-4">
</div>
<div class="col-4" style="text-align:left">
<button type="submit" class="btn btn-primary form-control" data-target="#MyModal" data-toggle="modal">Submit</button>
</div>
</div>
</div>
}
</fieldset>
Controller
[HttpPost]
public IActionResult GetTicket(HelpDeskViewModel h)
{
HelpDeskViewModel sess = new HelpDeskViewModel();
try
{
//session variable passing userID
sess.userID = HttpContext.Session.GetString("userID");
if (!ModelState.IsValid) return View(h);
//h.empID = null; //add ticket record without employeeID - ticket hasn't been assigned yet
h.userID = sess.userID; //add userID from session
_db.helpdesk.Add(h);
_db.SaveChanges();
}
catch (Exception ex)
{
global.gLogger.log.Debug("Debug message: ", ex.Message);
global.gLogger.log.Error(new Exception(), ex.Message);
global.gLogger.log.Error(new Exception(), ex.StackTrace);
global.gLogger.log.Fatal("Fatal message: ", ex.Message); ;
}
return View("GetTicket");
}
You can use ViewBag for open bootstrap modal after successfully return from server to client
Client Side View
#if(ViewBag.SuccessfullyTicketCreated != null)
{
<script>
$('#myModal').modal('show'); // open model by use jQuery
</script>
}
Server side Controller
_db.SaveChanges();
ViewBag.SuccessfullyTicketCreated = true; // create ViewBag after savechange success
I hope help you simple way
Only use of ajax call can solve your problem without creating any further issues. if you are not using jQuery, you can also send ajax call using Javascript using fetch() method.
<form id="form" action="/Controller/GetTicket" method="post">
<div class="container">
<div class="form-group">
<div class="row m-4 text-center">
<div class="col-4">
</div>
<div class="col-4">
<h2 style="text-align:center;font-weight:bold">Get A Ticket</h2>
</div>
</div>
</div>
<div class="form-group">
<div class="row m-3">
<div class="col-4" style="text-align:left">
#Html.LabelFor(m => m.category)
</div>
<div class="col-4">
#Html.DropDownListFor(m => m.category, new SelectList(Model.categoryList, "Value", "Text"), "Select category", new { #class = "form-control" })#Html.ValidationMessageFor(model => model.category,
"", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="form-group">
<div class="row m-3">
<div class="col-4" style="text-align:left">
#Html.LabelFor(m => m.ticketDescription)
</div>
<div class="col-4">
#Html.TextAreaFor(m => m.ticketDescription, new { #class = "form-control" })#Html.ValidationMessageFor(model => model.ticketDescription,
"", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="form-group">
#*Modal for ticket creation*#
<div class="modal" id="MyModal" role="dialog">
<div class="modal-dialog">
<div class="model-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h4>Ticket Created</h4>
</div>
<div class="modal-body">
<p> Your Helpdesk ticket has been succesfully submitted</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal"> close</button>
</div>
</div>
</div>
</div>
</div>
<div class="row m-3">
<div class="col-4">
</div>
<div class="col-4" style="text-align:left">
<button type="submit" class="btn btn-primary form-control" data-target="#MyModal" data-toggle="modal">Submit</button>
</div>
</div>
</div>
</form>
Use Javascript:
<script> function onSubmit(){
$.ajax({
url:'/Controller/GetTicket',
type:'post',
data: $('#form').serialize(),
success: function(){
// code here;}
})
}</script>
I have a an Edit Popup modal in my Main View
Load.cshtml
<div class="modal fade" id="EditVolunteerModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" style="font-weight: bold; font-size: 25px">
Edit Volunteer Details
</h4>
</div>
<div class="modal-body">
<form id="EditForm"> #*ID of my form*#
</form>
</div>
</div>
</div>
</div>
This is my Jquery in Load.cshtml
$("#EditForm").validate({
errorClass: 'errors',
rules: {
PhoneNumber: {
required: true,
},
EmailAddress: {
required: true,
},
DonationForWhom: {
required: true,
},
DonationValue: {
required: true,
}
},
messages: {
PhoneNumber: {
required: "Please Enter Phone Number",
color: "#FF0000"
},
EmailAddress: {
required: "Please Enter Email Id",
},
DonationForWhom: {
required: "Please enter whom the donation is for",
},
DonationValue: {
required: "Please Enter Donation Value",
},
}
});
This is the function from where I am loading the view in my Edit Modal above
function EditVolunteer(vId) {
$.ajax({
url: '#Url.Action("EditVolunteerById","ViewEditVolunteer")',
data: { id: vId },
type: "GET"
}).done(function(data) {
$("#EditVolunteerModal .modal-body #EditForm").html(data);
});
}
My issue:
When I make an edit, it doesn't update in the DB if I use this in my done function
$("#EditVolunteerModal .modal-body #EditForm").html(data);
However, if I use the following, I am able to make updates to my DB but the validation doesn't fire.
$("#EditVolunteerModal .modal-body").html(data);
I don't think my Partial view is required but if needed, please tell me.
My attemps
Tried to replace the div tag to form in my modal as suggested in an answer
Tried adding #Html.PartialView("Name") in my modal but didnt work
Tried a couple of other things.
How do I get both the things working? My edit and validation together? Please guide me. Thank you.
Edited for more clarity
Here's my MainView (Load.cshtml)
#model IEnumerable<VMS.Models.VolunteerInfo>
#{
ViewBag.Title = "Load Volunteer";
}
<head>
<script src="~/Scripts/jquery.validate-vsdoc.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
</head>
<h2 style="margin-bottom: 1em">
Registered Volunteers
<button type="button" class="btn btn-group-sm btn-success pull-right" id="Excel_Btn">Export to Excel</button>
</h2>
<div id="VolunteerGrid">
<table class="table" id="tblVolunteers">
<thead>
<tr>
<th>
Name
</th>
#*<th>
Email
</th>*#
<th>
Phone Number
</th>
<th>
Donation For Whom
</th>
<th>
Date Donation To Be Used
</th>
<th>
Donation Kind
</th>
<th>
Donation Value
</th>
<th>
Date Volunteer Added
</th>
<th>
Action
</th>
</tr>
</thead>
<tbody>
#foreach (var volunteer in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => volunteer.Name)
</td>
#*<td>
#Html.DisplayFor(modelItem => volunteer.EmailAddress)
</td>*#
<td>
#Html.DisplayFor(modelItem => volunteer.PhoneNumber)
</td>
<td>
#Html.DisplayFor(modelItem => volunteer.DonationForWhom)
</td>
<td>
#Html.DisplayFor(modelItem => volunteer.DateDonationToBeUsed)
</td>
<td>
#Html.DisplayFor(modelItem => volunteer.DonationKind)
</td>
<td>
#Html.DisplayFor(modelItem => volunteer.DonationValue)
</td>
<td>
#Html.DisplayFor(modelItem => volunteer.DateWhenVolunteerWasAdded)
</td>
<td>
Edit | Delete
</td>
</tr>
}
</tbody>
</table>
<div class="modal fade" id="EditVolunteerModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" style="font-weight: bold; font-size: 25px">
Edit Volunteer Details
</h4>
</div>
<div class="modal-body">
<form id="EditForm">#*ID of my form*#
</form>
</div>
</div>
</div>
</div>
<div class="modal fade" id="DeleteVolunteerModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" style="font-weight: bold;font-size: 25px">
Delete Volunteer
</h4>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#Excel_Btn').on('click', function() {
$.ajax({
url: '#Url.Action("ExportToExcel","ViewEditVolunteer")'
});
});
});
$("#EditForm").validate({
errorClass: 'errors',
rules: {
PhoneNumber: {
required: true,
},
EmailAddress: {
required: true,
},
DonationForWhom: {
required: true,
},
DonationValue: {
required: true,
}
},
messages: {
PhoneNumber: {
required: "Please Enter Phone Number",
color: "#FF0000"
},
EmailAddress: {
required: "Please Enter Email Id",
},
DonationForWhom: {
required: "Please enter whom the donation is for",
},
DonationValue: {
required: "Please Enter Donation Value",
},
}
});
$('#tblVolunteers').dataTable();
$(".Edit_btn").on('click', function() {
$("#EditVolunteerModal").modal("show");
});
$(".Delete_btn").on('click', function() {
$("#DeleteVolunteerModal").modal("show");
});
function EditVolunteer(vId) {
$.ajax({
url: '#Url.Action("EditVolunteerById","ViewEditVolunteer")',
data: { id: vId },
type: "GET"
}).done(function(data) {
$("#EditVolunteerModal .modal-body").html(data);
});
}
function DeleteVolunteer(vId) {
$.ajax({
url: '#Url.Action("DeleteVolunteerById","ViewEditVolunteer")',
data: { id: vId },
type: "GET"
}).done(function(data) {
$("#DeleteVolunteerModal .modal-body").html(data);
});
}
</script>
Here's my partial view
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Edit Volunteer</title>
</head>
<body>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
#Html.HiddenFor( model => model.VolunteerId)
<div class="form-group">
#Html.LabelFor(model => model.Name, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Name, new { htmlAttributes = new { #class = "form-control", disabled = "disabled" } })
#Html.ValidationMessageFor(model => model.Name, "", new { #class = "text-danger" })
#Html.HiddenFor(model => model.Name)
</div>
</div>
#*<div class="form-group">
#Html.LabelFor(model => model.BirthdayDay_AnniversaryDate, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.BirthdayDay_AnniversaryDate, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.BirthdayDay_AnniversaryDate, "", new { #class = "text-danger" })
</div>
</div>*#
<div class="form-group">
#Html.LabelFor(model => model.PhoneNumber, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.PhoneNumber, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.PhoneNumber, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Address, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextAreaFor(model => model.Address, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Address, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.EmailAddress, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.EmailAddress, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.EmailAddress, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.Label("Who the donatin is for?*", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.DonationForWhom, new { htmlAttributes = new { #class = "form-control"} })
#Html.ValidationMessageFor(model => model.DonationForWhom, "", new { #class = "text-danger" })
</div>
</div>
#*<div class="form-group">
#Html.LabelFor(model => model.OccasionsID, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.OccasionsID, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.OccasionsID, "", new { #class = "text-danger" })
</div>
</div>*#
<div class="form-group">
#Html.LabelFor(model => model.DonationKind, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.RadioButtonFor(v => v.DonationKind, "Money", new { id = "RadioMoney", name = "RadioMoney" }) Money
#Html.RadioButtonFor(v => v.DonationKind, "Kind Donation", new { id = "RadioKindDonation", name = "RadioKindDonation" }) Kind Donation
#Html.ValidationMessageFor(model => model.DonationKind, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.Label("Donation Value*", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.DonationValue, new { htmlAttributes = new { #class = "form-control"} })
#Html.ValidationMessageFor(model => model.DonationValue, "", new { #class = "text-danger" })
</div>
</div>
#*<div class="form-group">
#Html.LabelFor(model => model.DateWhenVolunteerWasAdded, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.DateWhenVolunteerWasAdded, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.DateWhenVolunteerWasAdded, "", new { #class = "text-danger" })
</div>
</div>*#
<div class="form-group">
#Html.LabelFor(model => model.DateDonationToBeUsed, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.DateDonationToBeUsed, new { htmlAttributes = new { #class = "form-control", placeholder = "mm/dd/yyyy" } })
#Html.ValidationMessageFor(model => model.DateDonationToBeUsed, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-success" />
</div>
</div>
</div>
}
This is how it is rendered in HTML
<form action="/ViewEditVolunteer/EditVolunteerById?id=1063" method="post"><input name="__RequestVerificationToken" type="hidden" value="UQY-eF0sZ-3s1wFWFtmdeoHrY-IAcH9feGh0u9_EJiDHp0ilifxJbemVY7WEx3qtYHN0CL7z3IEqMS3acgKW-xnMM4iVGTECC4xbavo5Uxc1"> <div class="form-horizontal">
<input data-val="true" data-val-number="The field VolunteerId must be a number." data-val-required="The VolunteerId field is required." id="VolunteerId" name="VolunteerId" type="hidden" value="1063">
<div class="form-group">
<label class="control-label col-md-2" for="Name">Name*</label>
<div class="col-md-10">
<input class="form-control text-box single-line" data-val="true" data-val-required="Name is required" disabled="disabled" id="Name" name="Name" type="text" value="Nikhil">
<span class="field-validation-valid text-danger" data-valmsg-for="Name" data-valmsg-replace="true"></span>
<input id="Name" name="Name" type="hidden" value="Nikhil">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="PhoneNumber">Phone Number*</label>
<div class="col-md-10">
<input class="form-control text-box single-line" data-val="true" data-val-number="The field Phone Number* must be a number." data-val-required="Phone number is required" id="PhoneNumber" name="PhoneNumber" type="number" value="0">
<span class="field-validation-valid text-danger" data-valmsg-for="PhoneNumber" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="Address">Address</label>
<div class="col-md-10">
<textarea cols="20" htmlattributes="{ class = form-control }" id="Address" name="Address" rows="2">sndkas</textarea>
<span class="field-validation-valid text-danger" data-valmsg-for="Address" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="EmailAddress">Email*</label>
<div class="col-md-10">
<input class="form-control text-box single-line" data-val="true" data-val-regex="Email is not valid" data-val-regex-pattern="^([a-zA-Z0-9_\-\.]+)#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$" data-val-required="Email is required" id="EmailAddress" name="EmailAddress" type="text" value="naina#gmail.com">
<span class="field-validation-valid text-danger" data-valmsg-for="EmailAddress" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="Who_the_donatin_is_for__">Who the donatin is for?*</label>
<div class="col-md-10">
<input class="form-control text-box single-line" id="DonationForWhom" name="DonationForWhom" type="text" value="Nikhil">
<span class="field-validation-valid text-danger" data-valmsg-for="DonationForWhom" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="DonationKind">What kind of donation?*</label>
<div class="col-md-10">
<input data-val="true" data-val-required="Please select one" id="RadioMoney" name="DonationKind" type="radio" value="Money"> Money
<input checked="checked" id="RadioKindDonation" name="DonationKind" type="radio" value="Kind Donation"> Kind Donation
<span class="field-validation-valid text-danger" data-valmsg-for="DonationKind" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="Donation_Value_">Donation Value*</label>
<div class="col-md-10">
<input class="form-control text-box single-line" data-val="true" data-val-required="Please Enter Value" id="DonationValue" name="DonationValue" type="text" value="50Kg Daal">
<span class="field-validation-valid text-danger" data-valmsg-for="DonationValue" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="DateDonationToBeUsed">What day the donation is to be used?</label>
<div class="col-md-10">
<input class="form-control text-box single-line" id="DateDonationToBeUsed" name="DateDonationToBeUsed" placeholder="mm/dd/yyyy" type="text" value="07/08/2018">
<span class="field-validation-valid text-danger" data-valmsg-for="DateDonationToBeUsed" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-success">
</div>
</div>
</div>
Remove <form id="EditForm"></form>
Put Id here #using (Html.BeginForm("EditActionMethodName","ControllerName",FormMethod.Post,new {#id = "EditForm"})
Cut the form validation code block form main view and copy to the edit volunteer partial view
.
$("#EditForm").validate({
errorClass: 'errors',
rules: {
PhoneNumber: {
required: true,
},
EmailAddress: {
required: true,
},
DonationForWhom: {
required: true,
},
DonationValue: {
required: true,
}
},
messages: {
PhoneNumber: {
required: "Please Enter Phone Number",
color: "#FF0000"
},
EmailAddress: {
required: "Please Enter Email Id",
},
DonationForWhom: {
required: "Please enter whom the donation is for",
},
DonationValue: {
required: "Please Enter Donation Value",
},
}
});
Should work.
I have a Razor page with a Partial attached. I would like to disable the Create button. Based on Termination Date. if the Termination Date set to after the present day, hovering over 'Create Side Letter' should disable the button, and add a Bootstrap tooltip. Would anyone be able to offer me some assistance as to how best to do this?
#section scripts {
<script language="javascript" type="text/javascript">
$(function () {
var lastItem = $(".contractSideLetterPanel:last");
var clickableTitle = lastItem.children(".panel-heading:first").find("a");
clickableTitle.click();
});
</script>
}
#section additionalStyles {
#Styles.Render("~/plugins/datatables/media/css/cssDatatables")
}
#section modal {
}
<article class="row">
<h1 class="pageTitle artistHeader fw200 mb20 mt10">#ViewBag.Title</h1>
<div class="col-md-12">
<div class="panel panel-visible" id="sideLettersContainer">
#* Header *#
<div class="panel-heading createContentTitle">
<div class="panel-title createLink">
<a href="#Url.Action("CreateSideLetter", "ClientSetup", new
{
page = Model.PagingInfo.Page,
take = Model.PagingInfo.Take,
sortBy = Model.PagingInfo.SortPropertyName,
sortAsc = Model.PagingInfo.SortAscending
})" data-container="body" data-toggle="tooltip" title="Add Side Letter" id="createSideLetterLink">
<span class="fa fa-file"></span> Create Side Letter
</a>
</div>
</div>
#* body *#
<div class="panel panel-visible tableContainer mbn">
#Html.Partial("_SideLettersList", Model)
</div>
#* Footer *#
<div class="panel-footer text-center">
<a href='#Url.Action("Contracts", "ClientSetup", new
{
page = Model.PagingInfo.Page,
take = Model.PagingInfo.Take,
sortBy = Model.PagingInfo.SortPropertyName,
sortAsc = Model.PagingInfo.SortAscending,
name = Model.SearchModel.Name,
createdby = Model.SearchModel.CreatedBy,
contractType = Model.SearchModel.ContractType,
dateFrom = Model.SearchModel.DateFrom,
dateTo = Model.SearchModel.DateTo
}
)' class="btn btn-primary" id="doneWithSideLettersLink">Done</a>
</div>
</div>
</div>
</article>
Partial
<div class="panel-group accordion accordion-lg mbn" id="sideLetterAccordion">
#* Contract Panel *#
#if (Model.OriginalContract != default(ContractDisplayModel))
{
<div class="panel contractSideLetterPanel mtn">
<div class="panel-heading sideLetterHeading">
<a class="accordion-toggle accordion-icon link-unstyled collapsed" data-toggle="collapse" data-parent="#sideLetterAccordion" href="#accord1">
#GetTitle(Model.OriginalContract.SummaryInfo)
</a>
</div>
<div id="accord1" class="panel-collapse collapse" style="height: 0px;">
<div class="panel-body">
#* START - Summary Information *#
#if (Model.OriginalContract.SummaryInfo.Description != string.Empty)
{
<div class="row">
#Html.LabelFor(m => m.OriginalContract.SummaryInfo.Description, new { #class = "col-sm-2 control-label ptn" })
<div class="col-sm-10 form-control-static ptn pb5">
<span>#Model.OriginalContract.SummaryInfo.Description</span>
</div>
</div>
}
<div class="row">
#Html.LabelFor(m => m.OriginalContract.SummaryInfo.ContractType, new { #class = "col-sm-2 control-label ptn" })
<div class="col-sm-10 form-control-static ptn pb5">
#{
var contractType = Model.OriginalContract.SummaryInfo.ContractType.GetEnumDescription();
}
<span>#contractType</span>
</div>
</div>
<div class="row">
#Html.LabelFor(m => m.OriginalContract.SummaryInfo.Currency, new { #class = "col-sm-2 control-label ptn" })
<div class="col-sm-10 form-control-static ptn pb5">
<span>#Model.OriginalContract.SummaryInfo.Currency</span>
</div>
</div>
<div class="row">
#Html.LabelFor(m => m.OriginalContract.SummaryInfo.StartDate, new { #class = "col-sm-2 control-label ptn" })
<div class="col-sm-4 form-control-static ptn pb5">
<span>#Model.OriginalContract.SummaryInfo.StartDate.ToString("D")</span>
</div>
#if (Model.OriginalContract.SummaryInfo.EndDate != default(DateTime?))
{
#Html.LabelFor(m => m.OriginalContract.SummaryInfo.EndDate, new { #class = "col-sm-2 control-label ptn" })
<div class="col-sm-4 form-control-static ptn pb5">
<span>#(Model.OriginalContract.SummaryInfo.EndDate != default(DateTime) ? ((DateTime)Model.OriginalContract.SummaryInfo.EndDate).ToString("D") : string.Empty)</span>
</div>
}
</div>
#if (Model.OriginalContract.SummaryInfo.SignedDate != default(DateTime?))
{
<div class="row">
#Html.LabelFor(m => m.OriginalContract.SummaryInfo.SignedDate, new { #class = "col-sm-2 control-label ptn" })
<div class="col-sm-10 form-control-static ptn pb5">
<span>#(Model.OriginalContract.SummaryInfo.SignedDate != default(DateTime) ? ((DateTime)Model.OriginalContract.SummaryInfo.SignedDate).ToString("D") : string.Empty)</span>
</div>
</div>
}
#if (Model.OriginalContract.SummaryInfo.NotificationDate != default(DateTime?))
{
<div class="row">
#Html.LabelFor(m => m.OriginalContract.SummaryInfo.NotificationDate, new { #class = "col-sm-2 control-label ptn" })
<div class="col-sm-10 form-control-static ptn pb5">
<span>#(Model.OriginalContract.SummaryInfo.NotificationDate != default(DateTime) ? ((DateTime)Model.OriginalContract.SummaryInfo.NotificationDate).ToString("D") : string.Empty)</span>
</div>
</div>
}
#if (Model.OriginalContract.SummaryInfo.TerminationDate != default(DateTime?))
{
<div class="row">
#Html.LabelFor(m => m.OriginalContract.SummaryInfo.TerminationDate, new { #class = "col-sm-2 control-label ptn" })
<div class="col-sm-10 form-control-static ptn pb5">
<span>#(Model.OriginalContract.SummaryInfo.TerminationDate != default(DateTime) ? ((DateTime)Model.OriginalContract.SummaryInfo.TerminationDate).ToString("D") : string.Empty)</span>
</div>
</div>
}
#if (Model.OriginalContract.SummaryInfo.PostTermCollectionEndDate != default(DateTime?))
{
<div class="row">
#Html.LabelFor(m => m.OriginalContract.SummaryInfo.PostTermCollectionEndDate, new { #class = "col-sm-2 control-label ptn" })
<div class="col-sm-10 form-control-static ptn pb5">
<span>#(Model.OriginalContract.SummaryInfo.PostTermCollectionEndDate != default(DateTime) ? ((DateTime)Model.OriginalContract.SummaryInfo.PostTermCollectionEndDate).ToString("D") : string.Empty)</span>
</div>
</div>
}
#* END - Summary Information *#
I
One way to achieve this could be to add a boolean property on your ViewModel called something like TerminationDateHasPassed.
public bool TerminationDateHasPassed{ get; set; }
Calculate the value for this new property in code behind. Something like:
TerminationDateHasPassed = TerminationDate < DateTime.Now
In your Partial razor view then you can add the disabled bootsrtap class based on this property to the Create button.
<a href="#Url.Action("CreateSideLetter", "ClientSetup", new
{
page = Model.PagingInfo.Page,
take = Model.PagingInfo.Take,
sortBy = Model.PagingInfo.SortPropertyName,
sortAsc = Model.PagingInfo.SortAscending
})" data-container="body" data-toggle="tooltip"
title="Add Side Letter" id="createSideLetterLink"
class=#(Model.TerminationDateHasPassed ? "disabled": "")>
<span class="fa fa-file"></span> Create Side Letter
</a>
I am passing a list to a view to display in a grid. Underneath the grid I have a form to allow the user to submit new values into the grid. When the controller is called the model always seems to be empty, I am not sure what I am doing wrong or if I should be doing this in a different way entirely.
The relavent parts of the view are as follows
#model IList<PSIApp.Models.PSM_StationTimetableView>
#using (Html.BeginForm())
{
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse3">Hourly Update ▼</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse in" style="width:100%; margin-left:0%; margin-right:50px;">
<div class="mainformCollapse" style="width:100%; margin-left:0%; margin-right:50px;">
<p class="group-header">Hourly Update</p>
<div class="form-group row">
<label for="example-text-input" class="col-xs-3 col-form-label" id="formLabelId">BP Issued</label>
<div class="col-xs-3">
#Html.MyTextBoxFor(p => p[0].PSM_StationBPData.BPIssued, new { #class = "generalformbox" }, false)
</div>
<label for="example-text-input" class="col-xs-3 col-form-label " id="formLabelId">BP Cancelled/Spoilt</label>
<div class="col-xs-3">
#Html.TextBoxFor(p => p[0].PSM_StationBPData.BPSpoilt, new { #class = "generalformbox" })
</div>
</div>
<div class="form-group row">
<label for="example-text-input" class="col-xs-3 col-form-label" id="formLabelId">AV Issued</label>
<div class="col-xs-3">
#Html.TextBoxFor(p => p[0].PSM_StationBPData.PostalReceived, new { #class = "generalformbox" })
</div>
<label for="example-text-input" class="col-xs-3 col-form-label" id="formLabelId">Tendered Issued</label>
<div class="col-xs-3">
#Html.TextBoxFor(p => p[0].PSM_StationBPData.BPTendered, new { #class = "generalformbox" })
</div>
</div>
<input type="submit" value="Submit Hourly Update" class="standardsubmitbt" />
</div>
</div>
</div>
</div>
}
Controller
public ActionResult POControl(Models.PSM_StationBPData model)
{
return RedirectToAction("POControl");
}
You are sending an IList of PSM_StationTimetableView, but you are expecting a PSM_StationBPData on the controller.
I am new to mvc and I wish to access a value from the code behind just a text box value and I thought this was the logical way of doing it by passing the value as a paremeter to my action Result but when i debug firstName its showing as null?.
It is this value here that I am trying to access please excuse my ignorance I come from a long webforms background.
<input id="firstName" class="form-control" type="text" />
Also quick quesiton in relation to the controller must I always return a view that it was called from can i for example go return step2 as long as it has same layout file ? How would one tell it to go to another view other than the Save action reason I am asking is I am doing a wizard form.
My Form Markup
#using (Html.BeginForm("Step1", "Forms", FormMethod.Post, new { id = "submitForm" }))
{
#Html.AntiForgeryToken()
<h4>Health Check</h4>
<hr />
#Html.ValidationSummary("", new { #class = "text-danger" })
<div class="form-group">
#Html.Label("First Name", new { #class = "col-md-2 control-label" })
<div class="col-md-10">
<input id="firstName" class="form-control" type="text" />
</div>
</div>
<div class="form-group">
#Html.Label("Middle Name", new { #class = "col-md-2 control-label" })
<div class="col-md-10">
<input id="txtmiddleName" class="form-control" type="text" />
</div>
</div>
<div class="form-group">
#Html.Label("Surname", new { #class = "col-md-2 control-label" })
<div class="col-md-10">
<input id="txtsurname" class="form-control" type="text" />
</div>
</div>
<div class="form-group">
#Html.Label("Saluation", new { #class = "col-md-2 control-label" })
<div class="col-md-10">
<input id="txtSaluation" class="form-control" type="text" />
</div>
</div>
<div class="form-group">
#Html.Label("Aliases", new { #class = "col-md-2 control-label" })
<div class="col-md-10">
<input id="txtAliases" class="form-control" type="text" />
</div>
</div>
<div class="form-group">
#Html.Label("Maritial Status", new { #class = "col-md-2 control-label" })
<div class="col-md-10">
<input id="txtmStatus" class="form-control" type="text" />
</div>
</div>
<div class="form-group">
#Html.Label("Maritial Status", new { #class = "col-md-2 control-label" })
<div class="col-md-10">
<select class="form-control"></select>
</div>
</div>
<div class="form-group">
#Html.Label("Address 2", new { #class = "col-md-2 control-label" })
<div class="col-md-10">
<input id="txtmStatus" class="form-control" type="text" />
</div>
</div>
<div class="form-group">
#Html.Label("City", new { #class = "col-md-2 control-label" })
<div class="col-md-10">
<input id="txtmStatus" class="form-control" type="text" />
</div>
</div>
<div class="form-group">
#Html.Label("Post Code", new { #class = "col-md-2 control-label" })
<div class="col-md-10">
<input id="txtmStatus" class="form-control" type="text" />
</div>
</div>
<div class="form-group">
#Html.Label("County", new { #class = "col-md-2 control-label" })
<div class="col-md-10">
<input id="txtCounty" class="form-control" type="text" />
</div>
</div>
<div class="form-group">
#Html.Label("Country", new { #class = "col-md-2 control-label" })
<div class="col-md-10">
<input id="txtmStatus" class="form-control" type="text" />
</div>
</div>
<div class="form-group">
#Html.Label("Date Of Birth", new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#(Html.Kendo().DatePicker()
.Name("datepicker"))
</div>
</div>
<div class="form-group">
#Html.Label("Home Tel No", new { #class = "col-md-2 control-label" })
<div class="col-md-10">
<input id="txtmStatus" class="form-control" type="text" />
</div>
</div>
<div class="form-group">
#Html.Label("Home Work No", new { #class = "col-md-2 control-label" })
<div class="col-md-10">
<input id="txtmStatus" class="form-control" type="text" />
</div>
</div>
<div class="form-group">
#Html.Label("Fax No", new { #class = "col-md-2 control-label" })
<div class="col-md-10">
<input id="txtmStatus" class="form-control" type="text" />
</div>
</div>
<div class="form-group">
#Html.Label("Mobile No", new { #class = "col-md-2 control-label" })
<div class="col-md-10">
<input id="txtmStatus" class="form-control" type="text" />
</div>
</div>
<div class="form-group">
#Html.Label("Best Time To Call", new { #class = "col-md-2 control-label" })
<div class="col-md-10">
<select class="form-control">
<option>Morning</option>
<option>Afternoon</option>
<option>Evening</option>
</select>
</div>
</div>
<button type="submit" id="btnSave">Save</button>
}
My Controller Action Result:
public ActionResult Step1(string firstName)
{
DataAccessAdapter _adapter = new DataAccessAdapter();
TblfhcsPersonalEntity _personal = new TblfhcsPersonalEntity();
_personal.FirstName = firstName;
_adapter.SaveEntity(_personal, true);
return View();
}
For any form in HTML to submit data, all <input> tags must have a name="..." attribute. Setting id is useful for javascript, but is ignored for the form submit.
In this case, name="firstName" would be a good start because that matches with what you are binding in the Controller action method Step1.