How can I change button name in a same view, my view is "_CreateOrUpdate", I want to call Save Action my button name change is Save and else when I call Update Action my button change Update.
<div class="form-actions">
<button type="submit" class="btn btn-primary" value="Save"><i class="icon-save"></i>Save</button>
You can have a property in the model for the button text.
#using (Html.BeginForm())
{
<button type="submit" class="btn btn-primary" value="Save"><i class="icon-save"></i>#Model.ButtonName</button>
}
Demo
this is solution for my answer.
#if (ViewContext.RouteData.GetRequiredString("action") == "Create")
{
<button type="submit" class="btn btn-primary" value="Save"><i class="icon-save"></i> Save</button>
}
else
{
<button type="submit" class="btn btn-primary" value="Edit"><i class="icon-save"></i> Save changes</button>
}
You can use simple JS function for this which will change button value. When the page is ready:
var button = document.getElementById("saveButton");
button.value = [Basically anything you want to pass from controller];
Another option is to use razor and ViewBag to pass something from controller. This is easier if you want just to pass Save/Update from controller:
ViewBag.CreateUpdate = "Save";
and in the view:
<button type="submit" class="btn btn-primary"><i class="icon-save"></i>#ViewBag.CreateUpdate</button>
Related
I am trying to add two buttons to my page, an "Accept" button and a "Reject" button. I have done like so
<button type="submit" name="SubmitButton" value="Accept" class="btn btn-sm btn-success">Accept</button>
<button type="submit" name="SubmitButton" value="Reject" class="btn btn-sm btn-danger">Reject</button>
Then in my controller I have the following
public ActionResult ViewRequest(string SubmitButton, int? id)
{
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
RequestLift requestLifts = db.requestLifts.Find(id);
if (requestLifts == null)
{
return HttpNotFound();
}
Lift lifts = db.Lifts.Find(id);
if (SubmitButton == "Accept")
{
requestLifts.bookingStatus = "Accepted";
db.SaveChanges();
return RedirectToAction("Index", "Home");
}
else if (SubmitButton == "Reject")
{
requestLifts.bookingStatus = "Rejected";
db.SaveChanges();t request has been rejected";
return RedirectToAction("Index", "Home");
}
return View(requestLifts);
}
However nothing happens on the button click?
#Html.BeginForm("ViewRequest", "SubmitButton")
{
<button type="submit" name="SubmitButton" value="Accept" class="btn btn-sm btn-success">Accept</button>
<button type="submit" name="SubmitButton" value="Reject" class="btn btn-sm btn-danger">Reject</button>
}
You need to wrap Html.BeginForm with using. This determines how the opening and closing form tags get added, i.e. around the buttons within the form. Your problem with submitting is that these buttons are not currently actually within your form tag.
#using (Html.BeginForm("ViewRequest", "SubmitButton"))
{
<button type="submit" name="SubmitButton" value="Accept" class="btn btn-sm btn-success">Accept</button>
<button type="submit" name="SubmitButton" value="Reject" class="btn btn-sm btn-danger">Reject</button>
}
I am creating a web app using mvc 5 here i have two buttons
<div class="row">
<div class="col-sm-offset-5 col-sm-1">
<input type="submit" name="save" value="SAVE" class="btn btn-primary glyphicon glyphicon-save" />
</div>
<div class="col-sm-offset-0 col-sm-1">
<input type="submit" name="reset" id="reset" value="Reset" class="btn btn-warning active glyphicon glyphicon-refresh" />
</div>
</div>
and i have a method which is being called after button click,
now on that event i want to differentiate the button click,
like,
if a user click
<input type="submit" name="save" value="SAVE" class="btn btn-primary glyphicon glyphicon-save" />
then
{
//this code should run
}
and if a user clicks
<input type="submit" name="reset" id="reset" value="Reset" class="btn btn-warning active glyphicon glyphicon-refresh" />
then
{ //this set of code should run }
and my method looks like this
[HttpPost]
public ActionResult insertrecd(FormCollection fc)
{
if(fc["reset"]==null)
{
return RedirectToAction("party", "party");
}
else
{
ViewBag.message = string.Format("Hello {0}.\\nCurrent Date and Time: {1}", "name", DateTime.Now.ToString());
return RedirectToAction("party", "party");
}
}
what i need to do, i want to do different code on different button clicks?
Give each input button the same name, but a different value
<input type="submit" name="action" value="save" class="btn btn-primary glyphicon glyphicon-save" />
<input type="submit" name="action" id="reset" value="reset" class="btn btn-warning active glyphicon glyphicon-refresh" />
The value will then be in your form collection as
fc["action"]
So your controller action could look like
[HttpPost]
public ActionResult insertrecd(FormCollection fc)
{
var action = fc["action"];
if(action == "save")
{
//save stuff
}
if(action =="reset")
{
//reset stuff
}
}
I want to give user the option to change their profile picture.On hitting the save button my controller action is hit but I get null value for HttpPostedFileBase.I am uploading files first time in mvc so not able to figure out where I am doing wrong and hence getting null value in controller.
controller
[AuthenticationRequired]
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult ChangeProfilePicture(HttpPostedFileBase imageData)
{
}
view
#using (Ajax.BeginForm("ChangeProfilePicture", "Account", new { enctype = "multipart/form-data" },new AjaxOptions { OnSuccess = "OnSuccess" }))
{
#Html.AntiForgeryToken()
<div class="modal-body" id="tilesDescription">
<div class="row">
<div class="col-md-12">
<div class="text-center">
<div class="fileUpload btn btn-primary">
<span>Select a photo from your computer</span>
<input id="uploadBtn" type="file" class="upload" name="imageData" accept="image/*" />
</div>
<div class="text-center">
<img id="imgprvw" alt="uploaded image preview" class="imgPreview hide" />
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-rounded btn-sm btn-tiles" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-rounded btn-sm btn-tiles disabled" id="btnProfilePic">Set as profile picture</button>
</div>
}
You cannot post your file using ajax like that, cause is not supported.
From my experience, the easiest way to get files posted using Ajax (if using jquery), is using :
http://malsup.com/jquery/form/
In the following code sample is there a 'Angular way' of preventing the default event of a button click or form submit. Currently I'm using 'onsubmit' to accomplish the task.
<form onsubmit="return false;">
<input ng-model="ctrl.task">
<button class="btn btn-primary" ng-click="ctrl.addTask()">Add</button>
</form>
Change your html to use $event like this (ctrl removed because controllers have been removed from Angular.dart):
<form onsubmit="return false;">
<input ng-model="task">
<button class="btn btn-primary" ng-click="addTask($event)">Add</button>
</form>
And in your component class:
void addTask(MouseEvent evt){
evt.preventDefault();
}
<form onsubmit="return false;">
<input ng-model="ctrl.task">
<button class="btn btn-primary" ng-click="ctrl.addTask($event)">Add</button>
</form>
In the controller:
$scope.ctrl = function() {
addTask: function(event) {
event.preventDefault();
}
}
I want to show modal(encouragementModal) only when user clicks on Encourage button.
Configuration
GSP View _encourage.gsp is :
<div ng-controller="EncouragementController">
<g:if test="${notEncouraged}">
<button class="btn" ng-click="openEncouragementModal()">Encourage</button>
<div modal="encouragementModal" close="closeEncouragementModal()" options="opts">
<div class="modal-header">
<h3>Encourage!</h3>
</div>
<div class="modal-body">
You are about to encourage with {{amount}}.
</div>
<div class="modal-footer">
<button class="btn btn-info cancel" ng-click="encourage()">Confirm</button>
<button class="btn btn-warning cancel" ng-click="close()">Cancel</button>
</div>
</div>
</g:if>
<g:else>
Thank you for encouraging.
</g:else>
The EncouragementController.js is
function EncouragementController($scope, $http) {
/**
* open payment dialog
*/
$scope.openEncouragementModal = function (amount) {
$scope.encouragementModal = true;
};
$scope.closeEncouragementModal = function () {
$scope.closeMsg = 'You canceled the encouragement’;
$scope.encouragementModal = false;
};
$scope.opts = {
backdropFade: true,
dialogFade:true
};
}
EncouragementController.$inject = [ '$scope', '$http'];
Question
Only the Encourage button should have been visible for the first time, but what I see is button along with the encouragementModal and it's buttons.
So, how do I do that?
References I followed
[1] Modal (ui.bootstrap.modal)
[2] Simple Grails + AngularJS Example
You need to hide it at first and only display it when scope.encouragementModal value is true.
<div modal="encouragementModal" ng-show="encouragementModal" options="opts">