Submitting to Control gives null value - c#

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.

Related

Either the Edit bootstrap modal works, or the Jquery .validate function works

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.

MVC Parser Error

I have been working on this page and after restructuring the HTML, I get following error
Parser Error
Description: An error occurred during the parsing of a resource required to service this request. Please review the following specific parse error details and modify your source file appropriately.
Parser Error Message: The using block is missing a closing "}" character. Make sure you have a matching "}" character for all the "{" characters within this block, and that none of the "}" characters are being interpreted as markup.
Source Error:
Line 43:
Line 44:
Line 45: #using (Html.BeginForm("BookingConfirmation", "UserPortal", FormMethod.Post, new { enctype = "multipart/form-data", #class = "form-horizontal" }))
Line 46: {
Line 47: #Html.HiddenFor(s => s.BookingRequest.BookingInfoId)
Source File: /Views/UserPortal/BookingConfirmation.cshtml Line: 45
Version Information: Microsoft .NET Framework Version:4.0.30319; ASP.NET Version:4.0.30319.36415
Here's the page code
#using System.Globalization
#using System.Threading
#using Core.Services.Objects
#using NileSat.App_LocalResources
#model NileSat.Models.NileSatViewModel
#{
Layout = "~/Views/Shared/_LayoutAdmin.cshtml";
}
#*<section id="content_wrapper">
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
<h1 class="breadTitle">Booking Confirmation</h1>
</div>
</div>
</div>
</section>*#
<section id="content_wrapper">
<header id="topbar">
<div class="topbar-left">
<ol class="breadcrumb">
<li class="crumb-icon">
<a href="#">
<span class="glyphicon glyphicon-home">UserPorta</span>
</a>
</li>
<li class="crumb-trail">
Home
</li>
</ol>
</div>
</header>
<div id="content">
<div class="row">
<div class="col-md-12 col-md-news">
<div class="panel panel-visible">
<div class="panel-heading">
<span class="panel-title">BookingConfirmation</span>
</div>
<div class="panel-body admin-form">
#using (Html.BeginForm("BookingConfirmation", "UserPortal", FormMethod.Post, new { enctype = "multipart/form-data", #class = "form-horizontal" }))
{
#Html.HiddenFor(s => s.BookingRequest.BookingInfoId)
#*<form method="POST" action="#Url.Action("BookingRequest", "UserPortal")">*#
#Html.AntiForgeryToken()
#*<h2>#Resource.ChannelSearch</h2>*#
<div class="form-group col-lg-6">
<label class="col-lg-4 control-label">#Resource.Date</label>
<div class="col-lg-7">
<label class="form-control">#Html.Label(Model.BookingRequest.RequestDT.Value.Date.ToString("dd/MM/yyyy", CultureInfo.InvariantCulture))</label>
</div>
</div>
<div class="form-group col-lg-6">
<label class="col-lg-4 control-label">#Resource.Time</label>
<div class="col-lg-7">
<label class="form-control">#Html.Label(Model.BookingRequest.RequestDT.Value.ToString("HH:mm:ss", CultureInfo.InvariantCulture))</label>
#Html.HiddenFor(s => s.BookingRequest.RequestDT)
</div>
</div>
<div class="form-group col-lg-6">
<label class="col-lg-4 control-label">#Resource.RequestNumber</label>
<div class="col-lg-7">
<label class="form-control">#Html.Label(Model.BookingRequest.RequestNum.ToString())</label>
#Html.HiddenFor(s => s.BookingRequest.RequestNum)
</div>
</div>
#*<div class="form-group col-lg-6">
<label>#Resource.RequestNumber</label>
#(Html.LabelFor(cs => cs.BookingRequest.RequestNum))
</div>*#
<div class="form-group col-lg-6">
<label class="col-lg-4 control-label">#Resource.CompanyName</label>
<div class="col-lg-7">
#(Html.TextBoxFor(cs => cs.BookingRequest.CompanyName, new { disabled = "disabled", #class = "form-control" }))
#*#Html.ValidationMessageFor(model => model.BookingRequest.CompanyName, null, new { #class = "contactError" })*#
</div>
</div>
<div class="form-group col-lg-6">
<label class="col-lg-4 control-label">#Resource.ChannelName</label>
<div class="col-lg-7">
#(Html.TextBoxFor(cs => cs.BookingRequest.ChannelName, new { disabled = "disabled", #class = "form-control" }))
#*#Html.ValidationMessageFor(model => model.BookingRequest.ChannelName, null, new { #class = "contactError" })*#
</div>
</div>
<div class="form-group col-lg-6">
<label class="col-lg-4 control-label">#Resource.AuthorPerson</label>
<div class="col-lg-7">
#(Html.TextBoxFor(cs => cs.BookingRequest.AuthorName, new { disabled = "disabled", #class = "form-control" }))
#*#Html.ValidationMessageFor(model => model.BookingRequest.AuthorName, null, new { #class = "contactError" })*#
</div>
</div>
<div class="form-group col-lg-6">
<label class="col-lg-4 control-label">#Resource.ContactEmail</label>
<div class="col-lg-7">
#(Html.TextBoxFor(cs => cs.BookingRequest.ContactEmail, new { disabled = "disabled", #class = "form-control" }))
#*#Html.ValidationMessageFor(model => model.BookingRequest.ContactEmail, null, new { #class = "contactError" })*#
</div>
</div>
<div class="form-group col-lg-6">
<label class="col-lg-4 control-label">#Resource.ContactPhone</label>
<div class="col-lg-7">
#(Html.TextBoxFor(cs => cs.BookingRequest.ContactPhone, new { disabled = "disabled" }))
#*#Html.ValidationMessageFor(model => model.BookingRequest.ContactPhone, null, new { #class = "contactError" })*#
</div>
</div>
<div class="form-group col-lg-6">
<label class="col-lg-4 control-label">#Resource.ContactFax</label>
<div class="col-lg-7">
#(Html.TextBoxFor(cs => cs.BookingRequest.ContactFax, new { disabled = "disabled", #class = "form-control" }))
#*#Html.ValidationMessageFor(model => model.BookingRequest.ContactFax, null, new { #class = "contactError" })*#
</div>
</div>
<div class="form-group col-lg-6">
<label class="col-lg-4 control-label">#Resource.ServiceName</label>
<div class="col-lg-7">
#(Html.DropDownListFor(cs => cs.BookingRequest.BookingServiceId, //"BookingServiceId",
new SelectList(Model.BookingServiceTypeViewModels, "Id", "ServiceName"
, Resource.ServiceName), new { disabled = "disabled" }))#*,Resource.All, new {#title = Resource.ServiceName}*#
, new { #class = "form-control" })
</div>
</div>
<div class="form-cn form-hotel tab-pane active in" id="form-hotel">
<div id="TADiv" style="display: none">
<div class="form-group col-lg-6">
<label class="col-lg-4 control-label">Satellite Name</label>
<div class="col-lg-7">
#(Html.TextBoxFor(cs => cs.BookingRequest.BookingDetails.SatelliteName, new { disabled = "disabled", #class = "form-control" }))
</div>
</div>
<div class="form-group col-lg-6">
<label class="col-lg-4 control-label">Orbital Position</label>
<div class="col-lg-7">
#(Html.TextBoxFor(cs => cs.BookingRequest.BookingDetails.OrbitalPosition, new { disabled = "disabled", #class = "form-control" }))
</div>
</div>
<div class="form-group col-lg-6">
<label class="col-lg-4 control-label">D/L Freq</label>
<div class="col-lg-7">
#(Html.TextBoxFor(cs => cs.BookingRequest.BookingDetails.DLFreq, new { disabled = "disabled", #class = "form-control" }))
</div>
</div>
<div class="form-group col-lg-6">
<label class="col-lg-4 control-label">
Polarization
</label>
<div class="col-lg-7">
#(Html.TextBoxFor(cs => cs.BookingRequest.BookingDetails.Polarization, new { disabled = "disabled", #class = "form-control" }))
</div>
</div>
<div class="form-group col-lg-6">
<label class="col-lg-4 control-label">S.R</label>
<div class="col-lg-7">
#(Html.TextBoxFor(cs => cs.BookingRequest.BookingDetails.SR, new { disabled = "disabled", #class = "form-control" }))
</div>
</div>
<div class="form-group col-lg-6">
<label class="col-lg-4 control-label">FEC</label>
<div class="col-lg-7">
#(Html.TextBoxFor(cs => cs.BookingRequest.BookingDetails.FEC, new { disabled = "disabled", #class = "form-control" }))
</div>
</div>
<div class="form-group col-lg-6">
<label class="col-lg-4 control-label">DVBS</label>
<div class="col-lg-7">
#(Html.TextBoxFor(cs => cs.BookingRequest.BookingDetails.DVBS, new { disabled = "disabled", #class = "form-control" }))
</div>
</div>
<div class="form-group col-lg-6">
<label class="col-lg-4 control-label">DVB S2</label>
<div class="col-lg-7">
#(Html.TextBoxFor(cs => cs.BookingRequest.BookingDetails.DVBS2, new { disabled = "disabled", #class = "form-control" }))
</div>
</div>
</div>
<div class="form-group col-lg-6">
<label class="col-lg-4 control-label">Date</label>
<div class="col-lg-7">
#*#(Html.Kendo().DatePickerFor(cs => cs.BookingRequest.BookingDetails.Date))*#
<label class="form-control">#(Html.Kendo().DatePickerFor(m => m.BookingRequest.BookingDetails.Date).Enable(false))</label>
#*#Html.HiddenFor(s => s.BookingRequest.BookingDetails.Date)*#
</div>
<div>
#*<button type="submit" class="button btn-primary" id="btn_AddTime" name="submit" value="AddNewEntry">Add Time</button>*#
#Html.Partial("_RequestTimes", Model)
</div>
<div class="form-group col-lg-6" id="Bw_Div">
<label class="col-lg-4 control-label">BW</label>
<div class="col-lg-7">
#(Html.DropDownListFor(cs => cs.BookingRequest.BookingDetails.BWRequiredId,
new SelectList(Model.BookingInfoBWViewModels, "Id", "BW"), "None", new { #title = "BW", disabled = "disabled", #class = "form-control" }))
</div>
</div>
<div class="form-group col-lg-6" id="Event_Div">
<label class="col-lg-4 control-label">Event/Conf Name</label>
<div class="col-lg-7">
#(Html.TextBoxFor(cs => cs.BookingRequest.BookingDetails.EventConfName, new { disabled = "disabled", #class = "form-control" }))
</div>
</div>
<div class="form-group col-lg-6" id="src_Div">
<label class="col-lg-4 control-label">Source</label>
<div class="col-lg-7">
#(Html.TextBoxFor(cs => cs.BookingRequest.BookingDetails.Source, new { disabled = "disabled", #class = "form-control" }))
</div>
</div>
<div class="form-group col-lg-6" id="Dest_Div">
<label class="col-lg-4 control-label">Destination</label>
<div class="col-lg-7">
#(Html.TextBoxFor(cs => cs.BookingRequest.BookingDetails.Destination, new { disabled = "disabled", #class = "form-control" }))
</div>
</div>
#*<div class="form-group col-lg-6">
<label>Destination</label>
#(Html.TextBoxFor(cs => cs.BookingRequest.BookingDetails.Destination))
</div>*#
<div id="MergeDIV" style="display: none">
<div class="form-group col-lg-6">
<label class="col-lg-4 control-label">Channel Name</label>
<div class="col-lg-7">
#(Html.TextBoxFor(cs => cs.BookingRequest.BookingDetails.ChannelName, new { disabled = "disabled", #class = "form-control" }))
</div>
</div>
</div>
<div id="SNGDiv" style="display: none">
<div class="form-group col-lg-6">
<label class="col-lg-4 control-label">Station Id</label>
<div class="col-lg-7">
#(Html.TextBoxFor(cs => cs.BookingRequest.BookingDetails.StationId, new { disabled = "disabled", #class = "form-control" }))
</div>
</div>
<div class="form-group col-lg-6">
<label class="col-lg-4 control-label">Station Contact Name</label>
<div class="col-lg-7">
#(Html.TextBoxFor(cs => cs.BookingRequest.BookingDetails.StationContactName, new { disabled = "disabled", #class = "form-control" }))
</div>
</div>
<div class="form-group col-lg-6">
<label class="col-lg-4 control-label">Station Contact Phone</label>
<div class="col-lg-7">
#(Html.TextBoxFor(cs => cs.BookingRequest.BookingDetails.StationContactPhone, new { disabled = "disabled", #class = "form-control" }))
</div>
</div>
</div>
<div class="form-group col-lg-6" id="encryption_Div">
<label class="col-lg-4 control-label">Encryption</label>
<div class="col-lg-7">
#(Html.CheckBoxFor(cs => cs.BookingRequest.BookingDetails.IsEncrypted, new { disabled = "disabled", #class = "form-control" }))
</div>
</div>
<div class="form-group col-lg-6">
<label class="col-lg-4 control-label">Other Details</label>
<div class="col-lg-7">
#(Html.TextAreaFor(cs => cs.BookingRequest.BookingDetails.OtherDetails, new { disabled = "disabled", #class = "form-control" }))
</div>
</div>
<div class="form-group col-lg-6" id="IsAgreed_Div">
<label class="col-lg-4 control-label">Agreement</label>
<div class="col-lg-7">
#(Html.CheckBoxFor(cs => cs.BookingRequest.BookingDetails.isAgreed, new { disabled = "disabled", #class = "form-control" }))
</div>
</div>
</div>
<div class="form-group col-lg-12">
<div class="col-lg-4">
</div>
<div class="col-lg-7">
<input type="submit" value="Confirm and Send E-mail" name="submit" class="btn btn-hover btn-danger btn-block pull-right" />
</div>
</div>
}
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script>
$('#BookingRequest_BookingServiceId').change(function () {
debugger;
// alert('hello');
var SelectedValue = $(this).val();
showHideDivs(SelectedValue);
});
$(function () {
debugger;
var SelectedValue = $('#BookingRequest_BookingServiceId').val();
showHideDivs(SelectedValue);
});
function showHideDivs(SelectedValue) {
if (SelectedValue == 1) {//feed
$('#TADiv').hide();
$('#btn_AddTime').show();
$('#Bw_Div').show();
$('#Event_Div').show();
$('#src_Div').show();
$('#Dest_Div').show();
$('#MergeDIV').hide();
$('#SNGDiv').hide();
$('#encryption_Div').show();
$('#IsAgreed_Div').show();
}
else if (SelectedValue == 2) {// fiber
$('#TADiv').hide();
$('#btn_AddTime').show();
$('#Bw_Div').hide();
$('#Event_Div').show();
$('#src_Div').show();
$('#Dest_Div').show();
$('#MergeDIV').hide();
$('#SNGDiv').hide();
$('#encryption_Div').hide();
$('#IsAgreed_Div').show();
}
else if (SelectedValue == 3) {//T.A
$('#TADiv').show();
$('#btn_AddTime').show();
$('#Bw_Div').hide();
$('#Event_Div').hide();
$('#src_Div').hide();
$('#Dest_Div').hide();
$('#MergeDIV').hide();
$('#SNGDiv').hide();
$('#encryption_Div').hide();
$('#IsAgreed_Div').show();
}
else if (SelectedValue == 4) { // SNG
$('#TADiv').hide();
$('#btn_AddTime').show();
$('#Bw_Div').show();
$('#Event_Div').show();
$('#src_Div').show();
$('#Dest_Div').show();
$('#MergeDIV').hide();
$('#SNGDiv').hide();
$('#encryption_Div').hide();
$('#IsAgreed_Div').show();
}
else //(SelectedValue == 1)
{
$('#TADiv').hide();
$('#btn_AddTime').hide();
$('#Bw_Div').hide();
$('#Event_Div').show();
$('#src_Div').hide();
$('#Dest_Div').hide();
$('#MergeDIV').show();
$('#SNGDiv').hide();
$('#encryption_Div').hide();
$('#IsAgreed_Div').show();
}
}
</script>
Can anyone please help find out what I have missed. It could be a div not closed, but I cant find it.
<div class="panel-body admin-form">
#using (Html.BeginForm("BookingConfirmation", "UserPortal", FormMethod.Post, new {...}))
{
<div class="form-group col-lg-6">
<label class="col-lg-4 control-label">Date</label>
<!--other code-->
<!--Not closing div here-->
}
</div><!--Date div is mistakenly matching this close tag and leaving close brace inside-->

POST action passing null ViewModel

I know this question has been asked and answered a dozen of times but none of the solutions help me.
I have a following ViewModel which is consisted of ProductDetail data model and a list of Product_ProductCategoryAttribute data model.
public class ProductDetailViewModel
{
public ProductDetail ProductDetail { get; set; }
public List<Product_ProductCategoryAttribute> Product_ProductCategoryAttribute { get; set; }
}
On an action postback I receive an empty ViewModel.
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit([Bind(Include = "idProductDetail,idProductCategory,idProduct,Name,Description")] ProductDetailViewModel productDetailAll)
{
if (ModelState.IsValid)
{
ProductDetail productDetail = productDetailAll.ProductDetail;
db.Entry(productDetail).State = EntityState.Modified;
db.SaveChanges();
return RedirectToAction("Index");
}
return View(productDetailAll);
}
However, as I believe that the underlying problem is somewhere within the view I will add the view code snippet.
#using (Html.BeginForm("Edit", "ProductDetail", FormMethod.Post))
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
#Html.HiddenFor(model => model.ProductDetail.idProductDetail)
<div class="form-group">
#Html.LabelFor(model => model.ProductDetail.Name, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextBoxFor(model => model.ProductDetail.Name, new { htmlAttributes = new { #class = "form-control" } })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.ProductDetail.Description, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextBoxFor(model => model.ProductDetail.Description, new { htmlAttributes = new { #class = "form-control" } })
</div>
</div>
#for (int i = 0; i < Model.Product_ProductCategoryAttribute.Count(); i++)
{
<div class="form-group">
<label class="control-label col-md-2">#Model.Product_ProductCategoryAttribute[i].ProductCategoryAttribute.Name</label>
<div class="col-md-5">
#Html.TextBoxFor(model => model.Product_ProductCategoryAttribute[i].Value, new { #class = "form-control" })
</div>
</div>
}
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-sm btn-default" />
</div>
</div>
</div>
}
HTML generated from the view above is as follows (some parts are ommited for brevity):
<form action="/Administration/ProductDetail/Edit/4" method="post"><input name="__RequestVerificationToken" type="hidden" value="IS4fstTTjOD4d9FEzyM5yWlvO9xqlOq_AHFx_8_vC079F1iDvucf5wgRIgV4iXH-NGU-u-J8IHBiKT4ApvR3cSLbhw_AntbibEFsD68eUkc1" />
<input data-val="true" data-val-number="The field idProductDetail must be a number." data-val-required="The idProductDetail field is required." id="ProductDetail_idProductDetail" name="ProductDetail.idProductDetail" type="hidden" value="4" />
<div class="form-group">
<label class="control-label col-md-2" for="ProductDetail_Name">Name</label>
<div class="col-md-10">
<input htmlAttributes="{ class = form-control }" id="ProductDetail_Name" name="ProductDetail.Name" type="text" value="Čipka i hiljadu šara" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="ProductDetail_Description">Description</label>
<div class="col-md-10">
<input htmlAttributes="{ class = form-control }" id="ProductDetail_Description" name="ProductDetail.Description" type="text" value="Šipka i čipka" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Veličina</label>
<div class="col-md-5">
<input class="form-control" id="Product_ProductCategoryAttribute_0__Value" name="Product_ProductCategoryAttribute[0].Value" type="text" value="" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Širina</label>
<div class="col-md-5">
<input class="form-control" id="Product_ProductCategoryAttribute_1__Value" name="Product_ProductCategoryAttribute[1].Value" type="text" value="" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Pakiranje</label>
<div class="col-md-5">
<input class="form-control" id="Product_ProductCategoryAttribute_2__Value" name="Product_ProductCategoryAttribute[2].Value" type="text" value="" />
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-sm btn-default" />
</div>
</div>
</div>
I'm not sure if something is wrong with the naming convention but my bet would be on that.
The problem was in autogenerated controller Edit action which added couple of [Bind(Include="")] attributes which were wrong and which were preventing data to be posted to the server.
Correct snippet would look like this:
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit (ProductDetailViewModel productDetailAll)
{
if (ModelState.IsValid)
{
ProductDetail productDetail = productDetailAll.ProductDetail;
db.Entry(productDetail).State = EntityState.Modified;
db.SaveChanges();
return RedirectToAction("Index");
}
return View(productDetailAll);
}

Correct way to display a MVC Form using bootstrap

I am using a form to capture various items from users, but I cant seem to get them to display the way I want.
I'm using bootstrap to have 2 columns of text boxes and their associated labels.
Unfortunately when it get to the last EditorFor, it displays out of line with the rest.
Am I using the divs and column options wrong?
Also how would I go about adding some space between the top and bottom of the text boxes?
Using padding in css?
What I'd like is to have the last label start at the left and then the textbox to be in line with it and take up the rest of the space in that column, maybe add a little space in between the rows.
Here is the code in my View
#model iskbv5.Models.Vendor
#{
ViewBag.Title = "Add New Vendor";
}
<h2>#ViewBag.Title</h2>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<hr />
<div class="form-group">
<div class="control-label col-md-2">
Vendor Name
</div>
<div class="col-md-4">
#Html.EditorFor(model => model.Name, new { htmlAttributes = new { #class = "form-control" } })
</div>
</div>
<div class="form-group">
<div class="control-label col-md-2">
Vendor Website
</div>
<div class="col-md-4">
#Html.EditorFor(model => model.Website, new { htmlAttributes = new { #class = "form-control" } })
</div>
</div>
<div class="form-group">
<div class="control-label col-md-2">
Vendor Address
</div>
<div class="col-md-4">
#Html.EditorFor(model => model.Address, new { htmlAttributes = new { #class = "form-control" } })
</div>
</div>
<div class="form-group">
<div class="control-label col-md-2">
Vendor Username
</div>
<div class="col-md-4">
#Html.EditorFor(model => model.Username, new { htmlAttributes = new { #class = "form-control " } })
</div>
</div>
<div class="form-group">
<div class="control-label col-md-2">
User Managing the Vendor
</div>
<div class="col-md-4">
#Html.EditorFor(model => model.ManagingUser, new { htmlAttributes = new { #class = "form-control" } })
</div>
</div>
<div class="form-group">
<div class="control-label col-md-2">
Vendor Password
</div>
<div class="col-md-4">
#Html.EditorFor(model => model.Password, new { htmlAttributes = new { #class = "form-control" } })
</div>
</div>
<div class="form-group">
<div class="control-label col-md-2">
Reason We Use the Vendor
</div>
<div class="col-md-4">
#Html.EditorFor(model => model.Usage, new { htmlAttributes = new { #class = "form-control" } })
</div>
</div>
<div class="col-md-12">
<input type="submit" value="Create" class="btn btn-xs btn-primary" /> or
Cancel
</div>
}
I have the Usage property set to
[DataType(DataType.MultilineText)]
public string Usage { get; set; }
This is how it currently displays.
Ahh, after making a few adjustments, and adding a <br/> in between each "row", I got the desired look. Thanks.

How do I display a Value from an input field in a Bootstrap Modal?

I am trying to create a Modal Confirmation dialog that displays the text entered into a text box for them to review before submitting.
I have it all 'working' except for displaying the Text in the Modal. Below is my View. Notice the #Model.UserName field. That shows nothing even though, if I click Submit on that page, it has a value once it get's back to the Controller.
So, how do I display the value of that Property or the Text box that contains it?
#model HelpDeskSupportRequestor.Models.SupportRequest
<h2>IT Support Request</h2>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.UserName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.UserName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.UserName, "", 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.LabelFor(model => model.RequestDetails, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.RequestDetails, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.RequestDetails, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.RequestPriority, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.RequestPriority)
#Html.ValidationMessageFor(model => model.RequestPriority, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="button" data-toggle="modal" data-target="#myModal" value="Submit Request" class="btn btn-default" />
</div>
</div>
</div>
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirm IT Support Request</h4>
</div>
<div class="modal-body">
<p>#Model.UserName</p>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel" />
<input type="submit" class="btn btn-primary" value="Confirm" />
</div>
</div>
</div>
</div>
}
Sounds to me like you're expecting the typed in username to exist in the model (and hence the modal in the view).
Try using javascript to do that:
<script type="text/javascript">
$('#UserName').on('input', function () {
var username = $("#UserName").val();
$(".modal-body").html('<p>'+username+'</p>');
});
</script>
EDIT
In response to your comment, as you're using bootstrap and editting multiple fields,
may as well do:
$('#myModal').on('shown.bs.modal', function (e) {
var username = $("#UserName").val();
var email = $("#EmailAddress").val();
var priority = $("#RequestPriority").val();
var request = $("#RequestDetails").val();
$(".modal-body").html('<p>User Name: '+username+'</p>' +
'<p>Email Address: '+email+'</p>' +
'<p>Requested Priority: '+priority+'</p>' +
'<p>Request Details: '+request+'</p>'); });
})

Categories