ReactJS.NET : Unable to get click events to fire - asp.net-mvc

I'm running ReactJS.NET with ASP.NET MVC, and everything renders well, except... i cannot get any kind of events to fire...
What i have tried :
1) Eliminating all JQuery references/usages - no success
2) onHover, onClick, with functions both inside and outside of the React-component - no success
Here is my code :
Attaching ProductLine React component in index.cshtml
#Html.React("ProductLine", Model)
React component
function addToCart() {
alert("Hoohohoho!!!");
};
var ProductLine = React.createClass({
render: function () {
return(
<div className="col-md-12 col-sm-12 col-xs-12" key={this.props.productData.name}>
<button onClick={this.addToCart}>Click me!</button>
<div className="row" >
<div onClick={addToCart} className="col-md-12 col-sm-12 col-xs-12 nopadding row-default" >
<div className="col-md-3 col-sm-5 col-xs-5 nopadding">
<span className="table table-col ">
<input type="checkbox" id="cbxCheck2" className="jq_select_product" />
<label htmlFor="cbxCheck2" className="jq_select_product">{ this.props.productData.name }</label>
</span>
</div>
<div className="col-md-4 hidden-sm hidden-xs nopadding">
<span className="table table-col table-text-small">
{ this.props.productData.label }
</span>
</div>
<div className="col-md-3 col-sm-4 col-xs-4 nopadding">
<span className="table table-col">
849,- (12 mnd)
</span>
</div>
<div className="col-md-2 col-sm-3 col-xs-3 nopadding">
<span className="table table-col table-text-small text-right">
<img id="imgShowMore" src="../../Images/arrow_purple_down.png" className="show-more _icon jq_expand_listview" /><label className="show-more _lbl jq_expand_listview">Vis mer</label>
</span>
</div>
</div>
<ProductDetails productData={this.props.productData} />
</div>
</div>
);
},
addToCart: function (e) {
alert("Hooooo!!!");
},
});

After 1/2 a day of trial and error, i suddenly tried to put all the JSX file references at the bottom of the _Layout.cshtml page...
That solved it all actually...

Related

Bootstrap 3 - Row Fixed Issue

I am strugling with Bootstrap 3 grid system.
Let me explain what I have implemented, what I need and what I did (fail attempt) to achieve.
This is the Layout (HTML | Razor) of the image. For you to have a live version of this This is the site link to this screen so you can see it and play.
<div class="row">
<div class="col-xs-12 col-md-6 nopadding">
<div id="showcaseSection" class="showcaseSection superVideo">
<ul class="media-list" id="showcaseMedia" itemscope itemtype="http://schema.org/UserComments"></ul>
</div>
<div class="hidden-xs">
<div class="col-xs-6 nopadding">
<p class="text-center no-margin" style="margin-top: 15px;">
<span>Equipo: #Model.Team1Name (<span id="team1Total">0</span>)</span>
</p>
<ul class="media-list team1ListShowCase" id="#Model.Team1Id" data-img="#Url.Action("GetLinkToImageTeam", "Home", new {Id = Model.Team1Id})" data-media="media-left" data-team="#Model.Team1Name" data-class="team1"></ul>
</div>
<div class="col-xs-6 nopadding">
<p class="text-center no-margin" style="margin-top: 15px;">
<span>Equipo: #Model.Team2Name (<span id="team2Total">0</span>)</span>
</p>
<ul class="media-list team2ListShowCase" id="#Model.Team2Id" data-img="#Url.Action("GetLinkToImageTeam", "Home", new {Id = Model.Team2Id})" data-media="media-right" data-team="#Model.Team2Name" data-class="team2"></ul>
</div>
</div>
</div>
<div class="col-xs-12 col-md-6">
<div class="col-xs-12 col-md-6 nopadding">
<div id="chatcontainer">
<ul class="media-list" id="chatbody" itemscope itemtype="http://schema.org/UserComments"></ul>
<div id="chatOptions" class="collapse">
<p class="text-center">#Model.Title</p>
<button id="exitroom" class="btn btn-danger" title="Salir" disabled="disabled">
<span class="glyphicon glyphicon-log-out"></span> #Resources.Salir
</button>
<span>
<input type="checkbox" id="isAutoscroll" name="my-checkbox" checked>
<label>Actualizar Mensajes</label>
</span>
</div>
</div>
#if (!Model.IsReadOnly)
{
<div class="input-group">
<input type="hidden" style="display: none" class="form-control" aria-required="false" readonly id="inresponseto">
<textarea type="text" rows="2" class="form-control" required="required" aria-required="true" maxlength="500" placeholder="Comentario..." disabled="disabled" id="responseText"></textarea>
<input type="text" class="form-control" style="height: 25px;" aria-required="false" readonly id="inresponsetomessage">
<span class="input-group-btn">
<button id="sendresponse" type="button" title="Enviar" class="btn btn-primary" disabled="disabled">
<span class="glyphicon glyphicon-send"></span>
</button>
<button class="btn btn-info" data-toggle="collapse" title="Opciones" data-target="#chatOptions">
<span class="fa fa-cogs"></span>
</button>
</span>
</div>
}
</div>
</div>
As you can see everything is in one row.
I want to have the Video Section fixed on top and the TEXT AREA to comment fixed BOTTOM when on XS (viewports).
I tried adding this to the row, but I fix the video but I cannot see the TEXT AREA
.fixed2 {
position: fixed;
z-index: 10;
width: 100%;}
I don't know what else to do to show fixed top (video) and botton fixed (Chat Textbox) and scrollable comments in the middle when in XS.
Any help is welcome.
Override the height for #chatcontainer for tablet/mobile will fix the issue. Example:
#media(max-width: 767px) {
#chatcontainer{
height: calc(50vh - 80px);
}
}

Open the Same Page as Both Normal and Bootstrap Pop-Up

As you can see in the picture below I have a form for adding notes and a form for editing notes on my page. What I want to do is: When I click edit button ("Düzenle" in my page), I want to open the window on the right as a pop-up.
The part codes on the left side of the picture ProjeListPartial.cshtml:
#model List<tbl_Not>
#if (Model.Any())
{
<div class="col-md-12 col-sm-12">
<div class="portlet light bordered">
<div class="portlet-title">
<div class="caption caption-md">
<i class="icon-bar-chart font-dark hide"></i>
<span class="caption-subject font-dark bold uppercase"><a>Proje Notları Toplam: #Model.Count() </a></span>
</div>
</div>
<div class="portlet-body">
<div class="scroller" style="height: 338px;" data-always-visible="1" data-rail-visible1="0" data-handle-color="#D7DCE2">
<div class="general-item-list">
#foreach (var item in Model)
{
<div class="item">
<div class="item-head">
<div class="item-details">
<a class="item-name primary-link">#item.Adi</a>
<br />
#if (Fonksiyonlar.KulYetSvys((int)Sabitler.YtkSeviyesi.TamYetki))
{
<span class="item-label">#item.tbl_Kullanici.Adi</span>
}
<span class="item-label">#item.EklenmeTarihi.ToString("dd.MM.yyy")</span>
#if (Fonksiyonlar.KulYetSvys((int)Sabitler.YtkSeviyesi.BirimTamYetki) || Fonksiyonlar.KulYetSvys((int)Sabitler.YtkSeviyesi.TamYetki))
{
<span class="item-status">
<!-- This is my edit code -->
Düzenle
<!-- -->
Sil
</span>
}
</div>
</div>
<div class="item-body"> #item.Icerik </div>
</div>
}
</div>
</div>
</div>
</div>
</div>
<div class="row" style="margin-left: 0px;">
<div class="col-md-12">
<div class="dataTables_paginate paging_bootstrap_number hidden-print" id="sample_3_paginate">
<ul class="pagination" style="visibility: visible;">
#Html.Raw(ViewBag.Sayfalama)
</ul>
</div>
</div>
</div>
}
else
{
<h3>Not Bulunmamaktadır.</h3>
}
The part codes on the right side of the picture Ekle.cshtml:
#model tbl_Not
#{
ViewBag.Title = "Not";
bool IsProjeNotu = Model.ProjeID > 0 ? true : false;
if (IsProjeNotu)
{
Layout = null;
}
}
<div class="portlet box blue">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-file-o"></i>Not Ekle/Düzenle
</div>
<div class="tools">
</div>
</div>
<div class="portlet-body #(IsProjeNotu?"portlet-collapsed":"")">
<form method="post" role="form" action="#Url.Action("Ekle", "Not", new { ProjeID = Model.ProjeID, BirimID = Model.BirimID, IsProjeNotu = IsProjeNotu })">
<input type="hidden" name="ID" value="#Model.ID" />
<div class="form-body">
#if (!IsProjeNotu)
{
<div class="col-lg-6 formbox pl">
<span>Birim Adı:</span>
<select name="BirimID" id="Birim" class="form-control">
#Html.Raw(ViewBag.Birim)
</select>
</div>
<div class="col-lg-6 pl pr formbox" onchange="return IlGetir();">
<span>Proje Adı:</span>
<select name="ProjeID" id="Projeler" class="form-control"></select>
</div>
}
<div class="col-md-6 pl formbox">
<span>İl/İller:</span>
<select multiple id="Iller" class="form-control">
#foreach (tbl_Il item in ViewBag.Iller)
{
<option value="#item.ID">#item.Adi</option>
}
</select>
<button id="SolaYolla" type="button" class="btn blue btn-sm" data-style="slide-up" data-spinner-color="#333">
<i class="fa fa-plus"></i> Ekle
</button>
</div>
<div class="col-md-6 formbox pr">
<span>İl Çıkar</span>
<select multiple id="SecilenIller" name="IlID" class="form-control">
#foreach (tbl_NotIlIliski item in Model.tbl_NotIlIliski.ToList())
{
<option value="#item.IlID">#item.tbl_Il.Adi</option>
}
</select>
<button id="SagaYolla" type="button" class="btn blue btn-sm" data-style="slide-up" data-spinner-color="#333">
<i class="fa fa-close"></i> Çıkar
</button>
</div>
<div class="col-md-12 formbox pr pl">
<span>Başlık:</span>
<input type="text" maxlength="250" class="form-control" style="width: 230px;" value="#Model.Adi" name="Adi" />
</div>
<div class="col-md-12 formbox pr pl">
<span>İçerik:</span>
<textarea class="mceEditor" style="width: 230px;" name="Icerik">#Model.Icerik</textarea>
</div>
</div>
<div class="col-md-12 formbox pr pl">
<span>Not Durumu:</span>
#foreach (var item in Sabitler.NotDurum)
{
<label class="mt-radio mt-radio-outline" style="margin-left: 15px;">
#item.Adi
<input #( Model.DurumID == 0 ? (item.ID == 1 ? "checked='checked'" : "") : (item.ID == Model.DurumID ? "checked='checked'" : "") ) type="radio" value="#item.ID" name="DurumID" />
<span></span>
</label>
}
</div>
<input type="submit" class="btn blue" id="Kaydet" onclick="$('#SecilenIller option').prop('selected', true);" value="Kaydet" />
</form>
</div>
When I click edit button (Düzenle), this is how a screen comes out:

JQuery Multi-step form in asp.net mvc

I have a multistep form wizard that go through seven(7) steps.
image
Controllers:
private RegistrationEntities db = new RegistrationEntities();
public ActionResult Index()
{
return View();
}
View:
<div class="title_right">
<div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>Contractors <small>Pre-Registration</small></h2>
<ul class="nav navbar-right panel_toolbox">
<li>
<a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<i class="fa fa-wrench"></i>
<ul class="dropdown-menu" role="menu">
<li>
Settings 1
</li>
<li>
Settings 2
</li>
</ul>
</li>
<li>
<a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<p>Kindly Follow the Procedures for the Pre-Registration Process.</p>
<div id="wizard" class="form_wizard wizard_horizontal">
<ul class="wizard_steps">
<li>
<a href="#step-1">
<span class="step_no">1</span>
<span class="step_descr">
Step 1<br />
<small>Step 1: Ownership Confirmation</small>
</span>
</a>
</li>
<li>
<a href="#step-2">
<span class="step_no">2</span>
<span class="step_descr">
Step 2<br />
<small>Step 2: RC Number</small>
</span>
</a>
</li>
<li>
<a href="#step-3">
<span class="step_no">3</span>
<span class="step_descr">
Step 3<br />
<small>Step 3: Company Name</small>
</span>
</a>
</li>
<li>
<a href="#step-4">
<span class="step_no">4</span>
<span class="step_descr">
Step 4<br />
<small>Step 4: TIN Number/Company Details</small>
</span>
</a>
</li>
<li>
<a href="#step-5">
<span class="step_no">5</span>
<span class="step_descr">
Step 5<br />
<small>Step 5: Company's Email</small>
</span>
</a>
</li>
<li>
<a href="#step-6">
<span class="step_no">6</span>
<span class="step_descr">
Step 6<br />
<small>Step 6: Other Company Details</small>
</span>
</a>
</li>
<li>
<a href="#step-7">
<span class="step_no">7</span>
<span class="step_descr">
Step 7<br />
<small>Step 7: Captcha</small>
</span>
</a>
</li>
</ul>
<div id="step-1">
<form class="form-horizontal form-label-left">
<div class="form-group">
<div class="col-lg-12">
<div class="col-lg-3">
<div class="form-group">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<div class="radio">
#Html.RadioButtonFor(m => m.OWNERSHIP_STRUCTURE, 1, new { #class = "DoPopup", id = "Foreign Company", value = "" }) Foreign Company
</div>
<div class="radio">
#Html.RadioButtonFor(m => m.OWNERSHIP_STRUCTURE, 2, new { #class = "DoPopup", id = "Foreign Owned Nigerian Company", value = "" }) Foreign Owned Nigerian Company
</div>
<div class="radio">
#Html.RadioButtonFor(m => m.OWNERSHIP_STRUCTURE, 3, new { #class = "DoPopup", id = "Nigerian Company", value = "" }) Nigerian Company
</div>
</div>
</div>
<div class="col-lg-3">
<div class="form-group">
</div>
</div>
</div>
</div>
</form>
</div>
<div id="step-2">
#*<h2 class="StepTitle">Step 2 Content</h2>*#
<form class="form-horizontal form-label-left">
<div class="col-lg-12">
<div class="form-group">
#Html.LabelFor(model => model.RC_NUMBER, new { #class = "col-lg-2 control-label" })
<div class="col-lg-9">
#Html.TextBoxFor(model => model.RC_NUMBER, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.RC_NUMBER)
</div>
</div>
</div>
</form>
</div>
<div id="step-3">
#*<h2 class="StepTitle">Step 3 Content</h2>*#
<form class="form-horizontal form-label-left">
<div class="form-group">
<div class="col-lg-12">
<div class="form-group">
#Html.LabelFor(model => model.COMPANY_NAME, new { #class = "col-lg-2 control-label" })
<div class="col-lg-9">
#Html.TextBoxFor(model => model.COMPANY_NAME, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.COMPANY_NAME)
</div>
</div>
</div>
</div>
</form>
</div>
<div id="step-5">
<form class="form-horizontal form-label-left">
<div class="col-lg-12">
<div class="form-group">
#Html.LabelFor(model => model.COMPANY_CONTACT_EMAIL, new { #class = "col-lg-2 control-label" })
<div class="col-lg-9">
#Html.TextBoxFor(model => model.COMPANY_CONTACT_EMAIL, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.COMPANY_CONTACT_EMAIL)
</div>
</div>
</div>
</form>
</div>
<div id="step-6">
<form class="form-horizontal form-label-left">
<div class="col-lg-12">
<div class="form-group">
<div class="col-lg-2">
Alternative E-mail
</div>
<div class="col-lg-9">
#Html.TextBoxFor(model => model.COMPANY_CONTACT_ALTERNATIVE_EMAIL, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.COMPANY_CONTACT_ALTERNATIVE_EMAIL)
</div>
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<div class="col-lg-2">
Website
</div>
<div class="col-lg-9">
#Html.TextBoxFor(model => model.WEBSITE, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.WEBSITE)
</div>
</div>
</div>
<h3>Login Details</h3>
<hr />
<div class="col-lg-12">
<div class="col-lg-1">
</div>
<div class="form-group">
<div class="col-lg-2">
Username
</div>
<div class="col-lg-8">
#*<i class="glyphicon glyphicon-user"></i>*#
<input class="form-control input-lg" name="MERGE0" id="email" type="email" placeholder="Email address" required>
</div>
</div>
<div class="col-lg-1">
</div>
</div>
<div class="col-lg-12">
<div class="col-lg-1">
</div>
<div class="form-group">
<div class="col-lg-2">
Password
</div>
<div class="col-lg-8">
#*<i class="glyphicon glyphicon-user"></i>*#
<input class="form-control input-lg" name="MERGE1" id="password" type="password" placeholder="Password" required>
</div>
</div>
<div class="col-lg-1">
</div>
</div>
</form>
</div>
<div id="step-7">
<form class="form-horizontal form-label-left">
<div class="col-lg-12">
<div class="col-lg-1">
</div>
<div class="form-group">
<div class="col-lg-10">
#Html.MathCaptcha()
#* #Html.Captcha(3)*#
<br />
<p class="Error"> #ViewBag.ErrMessage </p>
</div>
</div>
<div class="col-lg-1">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
}
<!-- jQuery Smart Wizard -->
<script>
$(document).ready(function () {
$('#wizard').smartWizard();
$('#wizard_verticle').smartWizard({
transitionEffect: 'slide'
});
$('.buttonNext').addClass('btn btn-success');
$('.buttonPrevious').addClass('btn btn-primary');
$('.buttonFinish').addClass('btn btn-default');
});
</script>
<!-- /jQuery Smart Wizard -->
The questions are:
How I I validate each step to make sure values are entered befor going to the next step
After completing the 7 steps, how do I valid that the values are entered properly before it saves.
After completing the 7th step, I clicked on the Finish button, no record was saved into the CONTRACTORS table
In step2, when RC_NUMBER is entered, it should check if it already exists. It should use it to populate COMPANY_NAME in step3, but if it doesnt exist, it should allow the user to enter COMPANY_NAME in step3
After completing the whole steps and Finish button is clicked, it should redirect to welcome model using ActionResult Welcome
Please check the answers to your questions below:
1.) jQuery SmartWizard allows us to add onLeaveStep:leaveAStepCallback field while declaring. leaveAStepCallback is the function that will be called when you click on the next button. You can implement your validation logic in this function. Please go through this URL to get the complete idea.
2.) jQuery SmartWizard also allows us to add onFinish:onFinishCallback field while declaring. In this case onFinishCallback function will be called after all the steps are completed. You can check here if all the inputs are valid and then submit the form. You must have got the idea if you had gone through the link in answer 1.
3.) You need to further elaborate why the details were not saved in DB? Is your controller action getting called? If yes, check your DB save logic to further find the issue as this is not the issue of SmartWizard.
4.) As I mentioned in the step 1 that bind a callback function to be called when next button is clicked. In this function, you can get the step number by using context.fromStep. After that you can make an ajax call to server to check if the value already exist. Implement your custom logic as required.
5.) If you are submitting form using $('form').submit(), you can redirect custom view from the controller after succesful operation. If you are making an ajax call, redirect to another controller in sucess function of ajax call.

UI.bootstrap.modal wont open when using latest versions of libraries

I am trying to do this under ASP.NET MVC 5 Visual Studio 2013, with the latest nuget libraries.
AngularJS Core 1.3.8
AngularJS UI Bootstrap 0.12.0
Bootstrap 3.3.1
jQuery 2.1.3
Important files:
App.js
var deviceModule = angular.module("devicesModule", ["ui.bootstrap"]);
var app = angular.module("dxuWebApp", ["devicesModule"]);
DeviceController.js
deviceModule.controller("DevicesController", function ($scope, deviceService, $modal) {
$scope.devices = [];
function init() {
$scope.devices = deviceService.getDevices();
}
init();
$scope.addDevice = function(size) {
var modalInstance = $modal.open({
templateUrl: "newDeviceTemplate.html",
controller: "NewDeviceModelController",
size: size
});
modalInstance.opened.then(function() {
alert('yep');
});
modalInstance.result.then(function (newDevice) {
deviceService.postDevice(newDevice);
}, function () {
});
}
});
deviceModule.controller("NewDeviceModelController", function ($scope, $modalInstance) {
$scope.ok = function () {
$modalInstance.close({ name: newDevice.name });
};
$scope.cancel = function () {
$modalInstance.dismiss("cancel");
};
});
newDeviceTemplate.html
<div class="modal-header">
<h2>New Device</h2>
</div>
<div class="modal-body">
<input type="text" data-ng-model="newDevice.name" />
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
Index.cshtml
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div data-ng-app="dxuWebApp" data-ng-controller="DevicesController">
<div class="row">
<div class="col-lg-12">
<h2>Devices <a data-ng-click="addDevice()"><span class="glyphicon glyphicon-plus-sign"></span></a></h2>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<ul class="list-inline">
<li data-ng-repeat="device in devices | orderBy: 'name'">
<a href="#">
<div class="device">
<div class="deviceImage">
#*<img alt="device image"/>*#
<span class="glyphicon glyphicon-phone"></span>
</div>
<div class="deviceName">
{{device.name | uppercase}}
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
#section scripts
{
#Scripts.Render("~/bundles/dxuWebApp")
<script type="text/ng-template" id="newDevice.html">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2>New Device</h2>
</div>
<div class="modal-body">
<input type="text" data-ng-model="newDevice.name" />
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</div>
</div>
</script>
}
The references to both ui-bootstrap and ui-bootstrap.tpls are in the _layout page.
I was hoping that when I clicked
<a data-ng-click="addDevice()"><span class="glyphicon glyphicon-plus-sign">
AngularJs magic would happen and I would get a modal on the screen, but nothing happens, no errors or anything like that.
I did put a break point on deviceController.addDevice() and it hit that point and goes through, nothing appear on the screen.
So what wrong with my code?
I had the exact same problem.
I am using MVC 5.0 with AngularJS so the reason it wasn't working ( I was getting a 404 not able to find the modal.html.) was I didn't create a route in the controller for the modal.html or map a view to the controller with the same name as the route.
After properly setting up the Controller and the View it worked.
Sorry there is no code for this since it was just a problem following the MVC process.

Unobtrusive ajax - View being fully replaced by partial view

I have searched multiple examples and have tried several things to get this to work properly. Currently I am trying to get a div to be replaced by using an Ajax.HtmlLink pointing to a PartialViewResult method.
I have tried
Checking network and javascript consoles to make sure my .js are all being loaded
Unbundling the stock jqueryval bundle and including the scripts manually
Double checked I didn't have another DOM element with the same update target Id
Checked my ajaxoptions to ensure everything was correct
I know unobtrusive is working because my Email duplicate remote validation check is working.
I will now show some screen shots of my debugging process
Here is what the page looks like prior to ajax load
My goal is to replace the container on the right that is currently holding email, name, and zipcode values
Here is the result##
This is what my view code looks like
<div class="container">
<br />
<br />
<div class="row">
<div class="col-sm-3">
<div class="sidebar-account">
<div class="row ">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">My Account</div>
<div class="panel-body">
<ul class="nav">
<li>
<a class="active" href="account_dashboard.html">Me</a>
</li>
<li>
#Ajax.ActionLink("Alerts", "ManageAlerts", null, new AjaxOptions
{
HttpMethod = "GET",
UpdateTargetId = "ajax-update",
InsertionMode = InsertionMode.Replace,
OnBegin = "ajaxBegin",
OnFailure = "ajaxFail",
OnComplete = "ajaxComplete",
OnSuccess = "ajaxSuccess"
}, new { #class = "active" })
</li>
<li>
<a class="active" href="account_account.html">Linked Accounts</a>
</li>
<li>
<a class="active" href="account_ads.html">Manage ads</a>
</li>
<li>
<a class="active" href="account_ad_create.html">Create new ad</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row hidden-xs">
<div class="col-lg-12">
<div class="well">
<div class="row ">
<div class="col-lg-3">
<img src="css/images/icons/Crest.png" width="45" />
</div>
<div class="col-lg-9">
<h4 style="margin-top: 0">Increase visibility</h4>
<p>Don't forget to 'bump' your listing to gain more visibility</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-9">
<div id="ajax-update">
#Html.Partial("_ManageUserAccount", Model)
</div>
</div>
<br />
</div>
Partial View Code##
<div id="fadein-div">
<div class="panel panel-default">
<div class="panel-heading">#Model.Username : Alerts</div>
<div class="panel-body">
<br />
<div class="row">
<div class="col-sm-12">
<p><span style="font-weight:bold">Change your alerts!</span></p>
</div>
</div>
<br />
#using (Html.BeginForm("ManageAlerts", "Account", FormMethod.Post, new { #class = "form-vertical", role = "form" }))
{
#Html.AntiForgeryToken()
<fieldset>
<div class="row">
<div class="col-sm-12 ">
<div class="form-group">
<div class="row">
<div class="col-sm-2">
<div class="checkbox">
#Html.CheckBoxFor(P => P.EmailAlertsOn) #Html.LabelFor(P => P.EmailAlertsOn)
</div>
</div>
</div>
</div>
<div id="control-div">
<div class="form-group">
<h3>Email alert options</h3>
</div>
<div class="form-group">
<div class="checkbox">
#Html.CheckBoxFor(P => P.EmailOnNewMessageOn) #Html.LabelFor(P => P.EmailOnNewMessageOn)
</div>
<div class="text-danger">
#Html.ValidationMessageFor(P => P.EmailOnNewMessageOn)
</div>
</div>
<div class="form-group">
<div class="checkbox">
#Html.CheckBoxFor(P => P.EmailOnReplyOn) #Html.LabelFor(P => P.EmailOnReplyOn)
</div>
<div class="text-danger">
#Html.ValidationMessageFor(P => P.EmailOnReplyOn)
</div>
</div>
<div class="form-group">
<div class="checkbox">
#Html.CheckBoxFor(P => P.EmailOnAccountUpdateOn) #Html.LabelFor(P => P.EmailOnAccountUpdateOn)
</div>
<div class="text-danger">
#Html.ValidationMessageFor(P => P.EmailOnAccountUpdateOn)
</div>
</div>
</div>
<br />
<button type="submit" class="btn btn-primary">Save details</button>
</div>
</div>
</fieldset>
}
</div>
</div>
And finally, controller code##
[HttpGet]
public PartialViewResult ManageAlerts()
{
var user = UserManager.FindById(Guid.Parse(User.Identity.GetUserId()));
Models.Account.ManageAlertsViewModel vm = new ManageAlertsViewModel();
vm.Username = user.UserName;
vm.EmailAlertsOn = user.EmailAlertsOn;
vm.EmailOnAccountUpdateOn = user.EmailOnAccountUpdateOn;
vm.EmailOnNewMessageOn = user.EmailOnNewMessageOn;
vm.EmailOnReplyOn = user.EmailOnReplyOn;
return PartialView("_ManageAlerts", vm);
}
<!-- js library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<script src="~/Themes/Authenticity%20Forms/Authenty/js/bootstrap.min.js"></script>
<script src="~/Themes/Authenticity%20Forms/Authenty/js/jquery.icheck.min.js"></script>
<script src="~/Themes/Authenticity%20Forms/Authenty/js/waypoints.min.js"></script>
<!-- authenty js -->
<script src="~/Themes/Authenticity%20Forms/Authenty/js/authenty.js"></script>
<!-- preview scripts -->
<script src="~/Themes/Authenticity%20Forms/Authenty/js/preview/jquery.malihu.PageScroll2id.js"></script>
<script src="~/Themes/Authenticity%20Forms/Authenty/js/preview/jquery.address-1.6.min.js"></script>
<script src="~/Themes/Authenticity%20Forms/Authenty/js/preview/scrollTo.min.js"></script>
<script src="~/Themes/Authenticity%20Forms/Authenty/js/preview/init.js"></script>
#Scripts.Render("~/bundles/jqueryval")

Resources