Angular JS on Refresh loosing CSS - asp.net-mvc

So weird things are happening. I have an angular page with routing, repeat etc., and it works fine. But if I press F5 in it, it always looses the CSS. I'm refreshing a partial view which is tied to a _Layout. So whenever I browse thru my page and press F5 on any page which is a partial view ONLY the partial view is refreshed and I loose all my CSS and layout elements. Why is that?
I'm using MVC btw.
For routing I'm using:
$routeProvider
.when('/Account/PersonalInformation', {
templateUrl:
function (params) {
return "/Account/PersonalInformation/"
}
})
EDIT
as per request, PersonalInformation.cshtml, nothing special:
#using (Html.BeginForm("PersonalInformationJSON", "Account", FormMethod.Post, new { id = "editUserForm" }))
{
<div class="account_container">
<div class="user_data background_black">
<div class="panel panel-default width-470 no_border">
<div class="panel-body head_title_background no_padding"><h4 class="white margin-left30 bold">PERSONAL_DATA<h4></div>
</div>
<ul>
<li>
<div class="label">
#Html.Label(FIRSTNAME)
#Html.Label(":")
</div>
#Html.TextBoxFor(m => m.Edit.FirstName, new { #class = "textbox_disable", #readonly = "readonly" })
</li>
<li>
<div class="label">
#Html.Label("LASTNAME")
#Html.Label(":")
</div>
#Html.TextBoxFor(m => m.Edit.LastName, new { #class = "textbox_disable", #readonly = "readonly" })
</li>
<li>
<div class="label">
#Html.Label(.("USERNAME"))
#Html.Label(":")
</div>
#Html.TextBoxFor(m => m.Edit.UserName, new { #class = "textbox_disable", #readonly = "readonly" })
</li>
<li>
<div class="label">
#Html.Label("BIRTHDATE")
#Html.Label(":")
</div>
<label class="textbox_disable">#Model.Edit.BirthDate.ToString("dd.MM.yyyy")</label>
</li>
<li>
<div class="label">
#Html.Label("TYPE_OF_LICENSE")
#Html.Label(":")
#Html.ValidationMessageFor(m => m.Edit.WebTypeOfLicense, "", new { #class = "red" })
</div>
#Html.DropDownListFor(m => m.Edit.SelectLicenseId, Model.Edit.WebTypeOfLicense, "Choose type of license", new { #class = "textbox",id="type_of_license" })
</li>
<li>
<div class="label">
#Html.Label("LICENSE_NUMBER")
#Html.Label(":")
#Html.ValidationMessageFor(m => m.Edit.IdentificationNumber, "", new { #class = "red" })
</div>
#Html.TextBoxFor(m => m.Edit.IdentificationNumber, new { #class = "textbox", id="licence_number" })
</li>
</ul>
}
Controller:
public ActionResult PersonalInformation(ManageMessageId? message, IndexPageModel model)
{
model.Edit = new EditModel();
model.Edit.Country = new SelectList(CommonDbService.GetAllCountry(), "Id", "Name");
model.Edit.WebTypeOfLicense = new SelectList(CommonDbService.GetAllLicense(), "Id", "Name");
WebUser user = WebUser.FindByUsername(User.Identity.Name);
ViewBag.StatusMessage =
message == ManageMessageId.ChangeDataSuccess
? "Your data has been changed."
: "";
UserDebitInformation userDebitInformation = UserDebitInformation.FindDebitInfoByUserId(user.Id);
model.Edit.UserName = user.UserName;
model.Edit.FirstName = user.FirstName;
model.Edit.LastName = user.LastName;
model.Edit.BirthDate = user.BirthDate;
model.Edit.SelectLicenseId = user.TypeOfLicence.Id;
model.Edit.IdentificationNumber = user.IdentificationNumber;
return View(model);
}

Related

ASP.NET MVC - add to a viewmodel list and submit

I have an ASP.NET MVC program with an order/odc request form. I have a customer, order and order item model. What I want to do is allow the user to place an order for a list of items to be approved. I have the viewmodel being passed to the form/view with a few fields including a list of order item objects. I am able to dynamically add rows to the table which shows the list of order items but on submit there is nothing in the viewmodel list. What am I doing wrong? How do I pass the items entered into the table to the view so that I can submit to the database?
Controller
public ActionResult NewOdc()
{
var viewModel = new NewOdcViewModel()
{
OdcItems = new List<tblOdcItem>()
};
viewModel.OdcItems.Add(new tblOdcItem());
return View(viewModel);
}
I call this code from jQuery to add a new item to the list:
public ActionResult GetView(string rowCount)
{
tblOdcItem item = new tblOdcItem();
return PartialView("_OdcItemEditor", item);
}
And on submit I call this code:
[HttpPost]
public ActionResult NewOdcSubmit(NewOdcViewModel viewModel)
{
_context.tblOdcs.Add(new tblOdc());
...
I'm using a foreach to go through the list and create a partial for each item.
View:
#using (Html.BeginForm("NewOdcSubmit", "Odc", FormMethod.Post))
{
if (Model != null)
{
#Html.HiddenFor(m => m.OdcItems);
}
<div class="panel panel-info">
<div class="panel-heading">
<h2 class="panel-title">Enter New ODC</h2>
</div>
<div class="panel-body">
#Html.AntiForgeryToken()
<div class="form-group">
#Html.LabelFor(model => model.User.UserName, new { #class = "col-md-2 col-sm-1 control-label" })
<div class="col-md-2 col-sm-3">
#Html.TextBoxFor(model => model.User.UserName, new { #Value = ((PM_Portal2020.Models.tblUser)Session["User"]).UserName, #readonly = true })
</div>
#Html.LabelFor(model => model.User.Phone, new { #class = "col-md-2 col-sm-1 control-label" })
<div class="col-md-2 col-sm-3">
#Html.TextBoxFor(model => model.User.Phone, new { #Value = ((PM_Portal2020.Models.tblUser)Session["User"]).Phone })
</div>
</div>
<div class="form-group col-md-10 col-sm-12">
<label>Expenses</label>
<table id="submissionTable" class="table table-bordered">
<thead>
<tr>
<th>Qty</th>
<th>Description</th>
<th>Estimated Cost</th>
</tr>
</thead>
<tbody>
#foreach (PM_Portal2020.Models.tblOdcItem item in Model.OdcItems)
{
#Html.Partial("_OdcItemEditor", item)
}
</tbody>
</table>
<p>
<button id="add" type="button" class="btn btn-primary">Add</button>
</p>
</div>
<div class="form-group col-lg-10 col-sm-12">
#Html.LabelFor(model => model.Details, new { #class = "col-md-2 col-sm-1 control-label" })
<div class="">
#Html.TextAreaFor(model => model.Details, new { #class = "form-control" })
</div>
</div>
</div>
<div class="panel-footer">
<div class="">
<button type="submit" class="btn btn-success">Save</button>
#Html.ActionLink("Back", "Index")
</div>
</div>
</div>
}
PartialView in Shared folder:
#model PM_Portal2020.Models.tblOdcItem
<tr #Html.Id("tablerow" + Model.ID)>
<td>
<div class="editor-field">
#Html.TextBoxFor(model => model.Quantity, new { #class = "text-box single-line", name = "Quantity[" + Model.ID + "]", type = "text", value = "", required = "required" })
</div>
</td>
<td>
<div class="editor-field">
#Html.TextBoxFor(model => model.Description, new { #class = "text-box single-line", name = "Description[" + Model.ID + "]", type = "text", value = "", required = "required", id = "itemDesc" })
</div>
</td>
<td>
<div class="editor-field">
#Html.TextBoxFor(model => model.EstimatedCost, new { #class = "text-box single-line", name = "EstimatedCost[" + Model.ID + "]", type = "text", value = "", required = "required" })
</div>
</td>
<td>
<button type="button" class="btn btn-primary" onclick="removeTr(this);">
<span class="glyphicon glyphicon-trash"></span>
</button>
</td>
</tr>
View Model
public class NewOdcViewModel
{
public NewOdcViewModel()
{
}
public IList<tblOdcItem> OdcItems { get; set; }
public string Details { get; set; }
public int OdcId { get; set; }
public tblUser User { get; set; }
}
It submits to the controller but the odcitems list is always count = 0. Any help would be great. Thanks
Here is the javascript example, just use this function on add/delete operation to re-arrange name.
function RearangeName(){
var i = 0;
$("#submissionTable>tbody>tr").each(function () {
$(this).find("input").each(function () {
if ($(this).prop("name").indexOf('Quantity') > 0) {
$(this).attr('name', "OdcItems[" + i + "].Quantity");
}
if ($(this).prop("name").indexOf('Description') > 0) {
$(this).attr('name', "OdcItems[" + i + "].Description");
}
if ($(this).prop("name").indexOf('EstimatedCost') > 0) {
$(this).attr('name', "OdcItems[" + i + "].EstimatedCost");
}
});
i++;
});
}
the name should be matched with model property, so in partial view, you have set name as OdcItems[0].Quantity instead of Quantity[" + Model.ID + "].
#Html.TextBoxFor(model => model.Quantity, new { #class = "text-box single-line", name = "OdcItems[0].Quantity", type = "text", value = "", required = "required" })
eg.
OdcItems[0].Quantity
OdcItems[1].Quantity
OdcItems[2].Quantity
....
OdcItems[n].Quantity

Using pagedlist with form parameters

I am using asp.net MVC 5 and Was wondering if there were any solutions out there that allowed me to use the PAGEDLIST library that can pass back input variables from the controller ALONG with passing back the .ToPagedList(pagenumber, pagesize) in the return view from the controller.
Here is the code i am working with:
In my Controller:
return View(tags.OrderBy(i => i.entry_no).ToPagedList(page ?? 1, 5));
In my View:
<div class="container-fluid">
<div class="row">
<div class="col-xs-4 input-group input-daterange" id="datepicker" style="margin-right: 30px">
#Html.EditorFor(model => model.startDate, new { #class = "form-control" })
<div class="input-group-addon">to</div>
#Html.EditorFor(model => model.endDate, new { #class = "form-control" })
</div>
<div class="col-xs-1 input-group">
<span class="input-group-addon">Desk:</span>
#Html.DropDownListFor(model => model.SelectedDesk,
new SelectList(Model.DeskOptions, "Text", "Value", Model.SelectedDesk), new { #class = "selectpicker" })
</div>
</div>
</div>
[...]
Page #(Model.Tag.PageCount < Model.Tag.PageNumber ? 0 : Model.Tag.PageNumber) of #Model.Tag.PageCount
#Html.PagedListPager(Model.Tag, page => Url.Action("Index", new { page, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter }))
So what i was hoping for was a way to update those editorfor/displayfor variables above along with passing back a pagedlist for table pagination.

partial view renders as full view on validation fail

my controller
public ActionResult Create()
{
return PartialView();
}
//
// POST: /User/Create
[HttpPost]
public ActionResult Create(User user)
{
if (ModelState.IsValid)
{
db.User.Add(user);
db.SaveChanges();
TempData["Message"] = "Data has been saved successfully!";
return RedirectToAction("Index");
}
return View(user);
}
my view
<div class="row">
#Html.ActionLink("Create New", "Create", null, new { #class = "modal-with-form btn btn-default", href = "#modalForm" })
<!-- Modal Form -->
<div id="modalForm" class="modal-block modal-block-primary mfp-hide">
#Html.Partial("Create", new jQuery_CRUD.DAL.User())
</div>
</div>
my partial view
#using (Ajax.BeginForm("Create", "User", null, new AjaxOptions { UpdateTargetId = "modalForm", InsertionMode = InsertionMode.Replace }))
{
<section class="panel">
<header class="panel-heading">
<h2 class="panel-title">Create</h2>
</header>
<div class="panel-body">
<div class="form-group mt-lg">
#Html.LabelFor(model => model.Name, new { #class = "col-sm-3 control-label" })
<div class="col-sm-9">
#Html.TextBoxFor(model => model.Name, new { name = "name", #class = "form-control", placeholder = "Type your name..."})
#Html.ValidationMessageFor(model => model.Name)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Address, new { #class = "col-sm-3 control-label" })
<div class="col-sm-9">
#Html.TextBoxFor(model => model.Address, new { name = "address", #class = "form-control", placeholder = "Type your Address..." })
#Html.ValidationMessageFor(model => model.Address)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.ContactNo, new { #class = "col-sm-3 control-label" })
<div class="col-sm-9">
#Html.TextBoxFor(model => model.ContactNo, new { name = "contactno", #class = "form-control", placeholder = "Type your Contact No..." })
#Html.ValidationMessageFor(model => model.ContactNo)
</div>
</div>
</div>
<footer class="panel-footer">
<div class="row">
<div class="col-md-12 text-right">
<input type="submit" value="Create" class="btn btn-primary" />
<button class="btn btn-default modal-dismiss" id="btnCancel">Cancel</button>
</div>
</div>
</footer>
</section>
}
when i click the button , modal pops up,upon validation fail on post action, the view returns to full view. where could be the problem????..
i'm new to mvc help me with this..
Add in the beginning of your partial view
{
Layout = null;
}
And return partialView in Validation Error not View
[HttpPost]
public ActionResult Create(User user)
{
if (ModelState.IsValid)
{
db.User.Add(user);
db.SaveChanges();
TempData["Message"] = "Data has been saved successfully!";
return RedirectToAction("Index");
}
return PartialView(user);
}

Submit Button on Razor View doesn't call Action Result - MVC

I have an issue with my submit button not calling the actionresult. I have set the breakpoint in the action result itself so i know that the actionResult is not even being called. Thank you in advance for your guidance.
View:
#model CCQAS.WebApp.Areas.Credentialing.Models.TransferCustodyViewModel
#using CCQAS.API.Model.Enums
#{var PersonId = ViewBag.SessionPersonId;}
#{ViewBag.Title = "Transfer Custody ";
ViewBag.HelpText = "When this record transfer becomes effective, responsibility for updating and maintaining this credentials record will be transferred to the gaining UIC";}
#using (Html.BeginForm("CreateCustodyTransfer", "TransferCustody", FormMethod.Post, new { #id = "transfer-custody-form", #role = "form" }))
{
#Html.AntiForgeryToken()
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">
Transfer Custody for #Html.DisplayFor(model => model.LastNameCommaFirstName)
#Html.Partial("_SectionHelp", (string)ViewBag.HelpText)
</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-sm-4 col-md-4">
<div class="form-group require">
#Html.LabelFor(model => model.UIC, "Transfer Record To")
<div class="input-group focus" tabindex="0" id="uic_txt">
#Html.EditorFor(model => model.UIC, "Uic", new { serviceLevel = true })
</div>
#Html.ValidationMessageFor(model => model.UIC)
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="form-group require">
#Html.LabelFor(model => model.ReasonId)
#Html.EnumDropDownListFor(model => model.ReasonId, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.ReasonId)
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="form-group require" hidden="hidden" id="divOtherReason">
#Html.LabelFor(model => model.OtherReasonTxt)
#Html.TextBoxFor(model => model.OtherReasonTxt, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.OtherReasonTxt)
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4 col-md-4">
<div class="form-group require">
#Html.LabelFor(model => model.EffectiveDateString)
#Html.TextBoxFor(model => model.EffectiveDateString, new { #class = "form-control", #disabled = "disabled" })
#Html.ValidationMessageFor(model => model.EffectiveDate)
</div>
</div>
</div>
</div>
<div class="panel-footer text-center">
<input type="submit" value="Submit" data-loading-text="Submitting..." class="btn btn-primary" autocomplete="off" id="submitButton" />
<button type="button" onclick="goBack()" class="btn btn-default">Cancel</button>
</div>
</div>
</div>
</div>
}
#section scripts{
<script>
$(function () {
var uic = $("#UIC");
var reasonId = $("#ReasonId");
var otherReason = $("#OtherReasonTxt");
$('#submitButton').click(function (event) {
if ((uic.val() != "" && reasonId.val() != "" && reasonId.val() != 99999) || (uic.val() != "" && reasonId.val() != "" && otherReason.val() != "")) {
if (!confirm("Are you sure you want to transfer custody?")) {
resetButtonState();
return false;
}
}
});
});
function goBack() {
window.location.href = document.referrer;
}
$('#ReasonId').change(function () {
toggleOtherReason();
});
//Other Reason fields will only display if "Other" is selected from the ReasonId drop down list
function toggleOtherReason() {
var reasonId = $("#ReasonId").val();
if (reasonId == 99999) {
$("#divOtherReason").show();
}
else {
$("#divOtherReason").hide();
}
}
</script>
}
Controller:
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult CreateCustodyTransfer(TransferCustodyViewModel viewModel)
{
string serviceCode = null;
var result = mtfService.GetMtfId(viewModel.UIC, serviceCode, null);
viewModel.MTFId = (long)result;
var model = new CredCustody();
{
model.UIC = viewModel.UIC;
model.ReasonId = viewModel.ReasonId;
model.OtherReasonTxt = viewModel.OtherReasonTxt;
model.UserMtfId = CurrentUser.PrimaryMtfId;
model.UserText = CurrentUser.Name;
model.CredProviderId = this.CredProvider.CredProviderId;
model.AuditUserId = CurrentUser.UserId;
model.MTFId = viewModel.MTFId;
};
long credCustodyId = this.credCustodyService.CreateCredCustody(model);
SetPageMessage(PageMessageType.Success, String.Format("Custody Transferred"));
return RedirectToAction("SearchResults", "ProviderSearch");
}

Retrieving dropdown values from partial view during post method

I need to get the selected dropdown value from partial view and included in the CategoryID in the Book class...
[Authorize]
public PartialViewResult GetAllCategory()
{
ProcessSVC.Category newCategory = new ProcessSVC.Category();
newCategory.ChildCategories = obj1.GetAllCategories(String.Empty);
return PartialView(newCategory);
}
GetAllCategory.cshtml (PartialView)
#model MvcAdminTemplate.ProcessSVC.Category
#Html.DropDownListFor(m => m.ParentID, new SelectList(Model.ChildCategories, "ID", "DisplayName"), new { #class = "form-control" })
Create View:
[Authorize]
[HttpPost]
public ActionResult Create()
{
MvcAdminTemplate.ProcessSVC.Book oBook = new ProcessSVC.Book();
return View(oBook);
}
Create.cshtml
#model MvcAdminTemplate.ProcessSVC.Book
#{
ViewBag.Title = "Create";
}
#Html.Partial("_LeftMenu")
<!-- content -->
<h2>Create</h2>
<div class="col-md-10">
#using (Html.BeginForm("Create", "Books", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<div class="row">
<div class="bootstrap-admin-no-table-panel-content bootstrap-admin-panel-content collapse in">
<form class="form-horizontal">
<fieldset>
<legend>Add Book</legend>
<div class="form-group">
<div class="col-lg-2">
#Html.LabelFor(m => m.BookName, new { #class = "control-label" })
</div>
<div class="col-lg-10">
#Html.TextBoxFor(m => m.BookName, new { #class = "form-control", type = "text" })
<p class="help-block"> </p>
</div>
</div>
<div class="form-group">
<div class="col-lg-2">
#Html.LabelFor(m => m.Description, new { #class = " control-label" })
</div>
<div class="col-lg-10">
#Html.TextBoxFor(m => m.Description, new { #class = "form-control ", type = "text" })
<p class="help-block"> </p>
</div>
</div>
<div class="form-group divCategory">
<div class="col-lg-2">
#Html.Label("Parent Category", new { #class = " control-label" })
</div>
<div class="col-lg-10">
#Html.HiddenFor(m => m.BookId, new { #class = "hdn-id" })
#Html.Action("GetAllCategory","Books")
<span class="help-block"> </span>
</div>
<button type="submit" class="btn btn-primary">Save changes</button>
<button type="reset" class="btn btn-default">Cancel</button>
</div>
</fieldset>
</form>
</div>
</div>
}
After submission of the above form i need to get Book attributes and Category "Selected Category".
[Authorize]
[HttpPost]
public ActionResult Create(ProcessSVC.Book oBook)
{
oBook.LanguageID = 1;
_service.AddBooks(oBook.ActualPrice,oBook.ActualPriceString, oBook.Author, oBook.BookId, oBook.BookName, oBook.CategoryID, oBook.Currency, oBook.CurrentPrice, oBook.CurrentPriceString,
oBook.Description, oBook.DiscountPercentage, oBook.DiscountValue, oBook.LanguageID,
oBook.NativeLanguageName, oBook.Publisher);
TempData.Add("SuccessMessage", " New book " + oBook.BookName + " Added !");
return RedirectToAction("Index");
}
Please suggest me.
To correctly bind your model, you need to create the dropdown in the main view. This line in you partial view
#Html.DropDownListFor(m => m.ParentID, ....
will render a select
<select name="ParentID" ...
but you model is expecting a property named CategoryID
In you Create() method, generate the SelectList and assign to a view model property or to ViewBag and then (instead or #Html.Action("GetAllCategory","Books") use
#Html.DropDownListFor(m => m.CategoryID, ....
use this line in your GetAllCategory.cshtml file
#Html.DropDownList("CategoryID", new SelectList(Model.ChildCategories, "ID", "DisplayName"), new { #class = "form-control" })

Resources