I currently have a form that when submit is clicked the selected value should be shown in the textarea/box and initial page should remain open.
But the problem I'm currently having is when I click the submit button, I'm being taken from the initial page and the value is being displayed on a blank page.
So basically I have two issues. How do I prevent being taken to another page once submit is clicked? And how can I get the value to be displayed in the textarea? I'm new to MVC, so any help would be greatly appreciated.
View:
<script language="JavaScript">
function showInput() {
document.getElementById('display').innerHTML =
document.getElementById("Envs").value;
}
</script>
<form asp-controller="CyberArk" asp-action="CyberArk" method="post" role="form" onsubmit="return confirm('Do you really want to carry out this action?');" id="form1" style="display:none;">
<div id="accordion" role="tablist" aria-multiselectable="true">
#* Form 1 *#
<div class="card">
<div class="card-header" role="tab" id="headingTwo">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" style="font-size:15px;">
Vault Status
</a>
</h5>
</div>
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="card-block">
<div class="form-group">
<div class="form-group">
<p> This script returns status of vault servers for the chosen environment. It is used to determine if any servers overlap in order to detect a split brain.</p>
</div>
#model PAM_Dashboard_Project.Models.Vaults
#Html.DropDownList("Envs", new SelectList(Enum.GetValues(typeof(Envs))), "Select Enivronment", new { #class = "form-control" })
<br>
<div>
<button type="submit" onclick="showInput();">Submit</button>
</div>
<br />
<textarea class="form-control" cols="20" id="ouput1" name="output1" rows="2"></textarea>
</div>
</div>
</div>
</div>
</div>
</form>
Model:
public class Vaults
{
public string Envs { get; set; }
}
public enum Envs
{
RTPprod,
OMA,
BG1,
BG2,
Cloud,
Workstation,
QA
}
Controller:
public class CyberArkController : Controller
{
public IActionResult CyberArk()
{
return View();
}
[HttpPost]
public string CyberArk(Vaults newVault)
{
string SelectedValue = newVault.Envs;
return (SelectedValue);
}
}
Update your event attribute to:
onclick="showInput(event);"
Update your showInput method to:
function showInput(e) {
e.preventDefault();
document.getElementById('display').innerHTML = document.getElementById("Envs").value;
}
Note: You don't have an element with the id display, so you need to fix that.
Related
I have a problem with implement saving value with input type number to the database. I have created website with ASP .NET MVC with UnitOfWork and Repositories. I have a Commodity model, where I have field Amount, and I have HomeViewModel in which I have a field Amount also. I would like to overwrite the amount field from the commodity model. Should I use onchange or onclick in input or a tags in html code, or all with my basic ideas are nonsens ?
Below is the code snippet with view created in RazorPages with extension .cshtml.
<div class="col-12">
<div class="row my-3">
#foreach(var Commodity in Model.CommodityList.Where(c=>c.CategoryId==category.Id))
{
<div class="col-lg-4 col-xl-3 col-md-6 pb-4">
<div class="card" style="border:2px solid #43ac6a;border-radius:5px;
backgroundcolor: #fffeee">
<div class="pl-3 pt-1 text-center">
<h3 class="card-title text-primary"><b>#Commodity.Name</b></h3>
</div>
<div class="d-flex justify-content-between">
<div class="pl-1 text-muted">#localizer.Get("Price")</div>
<div class="pr-1 text-danger h5">$#Commodity.Price</div>
</div>
<img src="#Commodity.ImageUrl" class="card-img-top p-2 rounded" />
<div class="col-9">
<input onchange="save()" asp-for="#Commodity.Amount" type="number"
id="quantity" name="quantity" min="0" max="100" />
</div>
<a onclick="save()" asp-action="Details" class="btn btn-success"
style="border-
radius:2px;" asp-route-id="#Commodity.Id"
onclick="save()">#localizer.Get("Details")</a>
</div>
</div>
}
</div>
</div>
My problem is that I can't write the value from after pressing the button below as the tag.
Below is the method written by me in controller regarding to the view
public IActionResult Index()
{
HomeVM = new HomeViewModel()
{
CategoryList = _unitOfWork.Category.GetAll(),
CommodityList = _unitOfWork.Commodity.GetAll(includeProperties: "Category"),
ServiceList = _unitOfWork.Service.GetAll(includeProperties: "Category,Payment"),
EmployeeList = _unitOfWork.Employee.GetAll(includeProperties: "Service"),
Amount = _unitOfWork.Commodity.GetFirstOrDefault(includeProperties:
"Category").Amount
};
foreach (var commodity in (_unitOfWork.Commodity.GetAll(includeProperties:
"Category")))
{
var CommodityFromDb = commodity;
CommodityFromDb.Amount = HomeVM.Amount;
_unitOfWork.Save();
}
_unitOfWork.Save();
return View(HomeVM);
}
I have a guess that you probably need to do it somehow with jquery, in a file with the extension js, but I have no idea how. I would be grateful for any help.
I am currently working on a basic To Do List on ASP.NET CORE. I have a button on top of the To-Do list to says "Add Task" upon clicking on the button you'll be re-directed to a Create Task Form. At the moment when click on the Add Task button to be re-directed to the form I am getting a localhost not found error. The URL is correct as it says http://localhost:51797/Todo/Create but my .cshtml page does not appear. I'm new to ASP.Net so apologies if the reason is obvious but I have gone through my code and I cant seem to find why this is happening.
[HttpPost]
[ActionName("Create")]
public ActionResult Create(int? id, string newText)
{
int i = id ?? 0;
TodoListItem toDo = _todoListService.GetList(i);
toDo.Text = newText; //Set new text
_todoListService.WriteToFile(toDo);
return RedirectToAction("Index");
}
}
This is my Create.cshtml page
#model TodoListItem
#{
ViewData["Title"] = "Create";
}
<h2>Add Task</h2>
<hr />
<div class="row">
<div class="col-md-4">
<form asp-action="Create">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="Text" class="control-label"></label>
<input asp-for="Text" class="form-control" name="newText" />
<span asp-validation-for="Text" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Submit" class="btn btn-primary" />
</div>
</form>
</div>
</div>
<div>
<a asp-action="Index">Back to List</a>
</div>
#section Scripts {
#{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
app.UseMvc(routes =>
routes.MapRoute(
name: "create",
template: "{controller=Todo}/{action=Create}");
});
You need an HTTPGET attribute for the GET action, which should return the create view with an empty model.
public IActionResult Create()
{
return View(new TodoListItem());
}
So when you click on Add Task, it will execute this action method and returns the create view.
Can please someone help me here?! Thank you!
I have a view that displays a list of products along with an "Add Product" button for each. I am calling the CreateNewProduct method for each "Add Product" click to find the status of the product. Depending on the status, either I need to stay on the same view or I need to call a modal popup. I am able to do this by creating a modal popup in a different view. But I want to call the modal popup div (also pass the modal) from the same view where it displays a list of products. Is this possible?
public ActionResult CreateNewProduct(int productId)
{
var sharedProduct = _productTemplateService.GetSharedProducts(productId);
var _finalSharedProducts = (sharedProduct.Any(t => t.productId != productId));
if (_finalSharedProducts)
{
var sharedProdctTemplate = _productTemplateService.GetSharedProduct(productId);
return View("ModalView", new SharedModel
{
SharedProduct = sharedProdctTemplate
});
}
else
{
_productTemplateService.CreateNewProduct(productId);
return RedirectToAction("Details", "ProductTemplate");
}
}
Model View Code
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Shared Product</h4>
</div>
<div class="modal-body">
<div class="flex-row">
<div class="col-6">
<div class="d-flex flex-row">
<div class="p-2">Product ID</div>
<div class="p-2">Product Types</div>
<div class="p-2">Status</div>
</div>
#foreach (var productTemplate in Model.SharedProduct )
{
<div class="d-flex flex-row">
<div class="p-2">#productTemplate.ProductId</div>
<div class="p-2">#productTemplate.ProductType</div>
<div class="p-2">#productTemplate.StatusCode</div>
</div>
}
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<p>
#Html.ActionLink("Edit", "Edit", new { /* id = Model.PrimaryKey */ }) |
#Html.ActionLink("Back to List", "Index")
</p>
<script type="text/javascript">
$(document).ready(function () {
$('#myModal').modal('show');
});
</script>
UPDATE:
I made it working. This is what I did. At the end, I have mentioned issues I am facing.
Link, modal and script in my main view - Detail View (called from ProductTemplate Controller)
<td>Add New Product</td>
<div class="modal fade" id="mymodel" role="dialog" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Shared Products</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body" id="mymodelbody">
</div>
</div>
</div>
<script>
var loadModal = function (productId, customerId) {
$.ajax({
type: 'GET',
url: '/NewProductTemplate/CreateNewProduct',
cache: false,
data: {
productId: productId,
customerId: customerId
},
dataType: 'html',
success: function (data) {;
$("#mymodelbody").html(data);
$("#mymodel").modal("show");
}
});
}
</script>
NewProductTemplateController Code
public ActionResult CreateNewProduct(Guid productId, Guid customerId)
{
var sharedProduct = _productTemplateService.GetSharedProducts(productId);
var _finalSharedProducts = (sharedProduct.Any(t => t.productId != productId));
if (_finalSharedProducts)
{
var sharedProdctTemplate = _productTemplateService.GetSharedProduct(productId);
return PartialView("_shared", new SharedModel
{
SharedProduct = sharedProdctTemplate
});
}
else
{
_productTemplateService.CreateNewProduct(productId);
return RedirectToAction("Details", "ProductTemplate");
}
}
Partial view _shared.view code
#model SharedModel
#using (Html.BeginForm("ShareProduct", "NewProductTemplate", FormMethod.Post))
{
#Html.AntiForgeryToken()
<div class="flex-row">
<div class="col-6">
<div class="d-flex flex-row">
<div class="p-2">Product ID</div>
<div class="p-2">Product Types</div>
<div class="p-2">Status</div>
</div>
#for (var i = 0; i < Model.SharedProducts.Count(); i++)
{
#Html.HiddenFor(model => model.SharedProducts.ElementAt(i).ProductId)
#Html.HiddenFor(model => model.SharedProducts.ElementAt(i).CustomerId)
#Html.HiddenFor(model => model.SharedProducts.ElementAt(i).ProductType)
#Html.HiddenFor(model => model.SharedProducts.ElementAt(i).StatusCode)
#Html.HiddenFor(model => model.SharedProducts.ElementAt(i).IsShared)
<div class="d-flex flex-row">
<div class="p-2">#Html.DisplayFor(model => model.SharedProducts.ElementAt(i).ProductId)</div>
<div class="p-2">#Html.DisplayFor(model => model.SharedProducts.ElementAt(i).ProductType)</div>
<div class="p-2">#Html.DisplayFor(model => model.SharedProducts.ElementAt(i).StatusCode)</div>
#if (Model.SharedProducts.ElementAt(i).StatusCode == VersionStatus.PUBLISHED)
{
<div class="p-2">#Html.EditorFor(m => m.SharedProducts.ElementAt(i).IsShared)</div>
}
</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-primary" />
<button type="button" class="btn btn-sm btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
PROBLEM:
1) When I save submit button in modal pop-up (partial view), it calls ShareProduct method from NewProductTemplate controller. For some reason, model SharedModel's SharedProducts property is null when it gets to controller code. Can you please help me here why it gets null?
public ActionResult ShareProduct (SharedModel shareModel)
{
//Access ShareProducts from shareModel
return RedirectToAction("Details", "ProductTemplate");
}
PROBLEM:
2) I want to load popup only if the product is shared, otherwise I just want to redirect to Detail view as mentioned in NewProductTemplate controller's CreateNewProduct method. Problem is that it loads Detail view also in popup if product is not shared since that's what my script is doing. Is there any way that I can check data in Success function before showing modal popup? If data/html contains Shared text, I would like to load the normal Detail view. I am just assuming. I tried to do so but with no success.
Detail method in ProductTemplate Controller
public ActionResult Details()
{
var productTemplate = _productTemplateService.GetAllProducts(User);
return View(new DetailsModel
{
ProductTemplate = productTemplate,
});
}
(This is for Bootstrap 3.3.7 Hopefully it's relevant for the version you're on)
I handle this by popping open the modal on the client side from my main view. The link that pops the modal contains the URL to the controller method that will render the actual contents (list of products, in your case). This controller method should return a partial view.
Modal in my main view:
<div class="modal fade name-of-my-modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content"></div>
</div>
</div>
Link in my main view:
<a class="btn btn-default btn-xs" data-toggle="modal" data-target=".name-of-my-modal" role="button" href="/SomeController/SomeMethodThatReturnsPartialView/234">Show Modal</a>
My controller method for the partial view:
public ActionResult SomeMethodThatReturnsPartialView(int id)
{
var model = GetProducts();
return PartialView("_IndexPartial", model);
}
My partial view that will populate the actual modal contents:
<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">Title goes here</h4>
</div>
<form class="form-horizontal" id="SomeId" name="SomeName" role="form">
<div class="modal-body">
<div>Product 1</div>
<div>Product 2</div>
<div>Product 3</div>
<div>Product 4</div>
</div>
</form>
Also, if the contents of the modal change frequently, or are variable based upon the ID you pass to the partial controller method, then you'll want to clear the modal contents when closing it. From your main view:
$(document).on('hidden.bs.modal', '.modal', function (e) {
// Handles the event thrown when a modal is hidden
$(this).removeData('bs.modal');
$(this).find(".modal-content").empty();
});
Let me know if this helps, and whether anything needs to be clarified.
Problem 2 you could return a JSON result and put the HTML in a string as shown here:
https://www.codemag.com/article/1312081/Rendering-ASP.NET-MVC-Razor-Views-to-String
you could also set a boolean on the returned JSON for whether to redirect.
If it is a redirect do that in Javascript on the success using
window.location
I have a simple contact message form written in razor asp.net and c#. Whenever the form is submitted, I am able to render the server response with no issues but for some reason, all of the input fields are maintaining the same values.
Here is the partial view:
#using PublicWebsite.Models.Contact;
#model ContactFormViewModel
<form role="form" id="contactForm" data-toggle="validator" method="post" asp-controller="Contact" asp-action="SubmitMessage">
#if (!string.IsNullOrWhiteSpace(Model.ServerResponse))
{
<div class="form-group">
<div class="row">
<div class="col-md-12">
<div class="alert #(Model.ServerResponseSuccess ? "alert-success" : "alert-danger")" role="alert">
#Model.ServerResponse
</div>
</div>
</div>
</div>
}
<div class="form-group">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="prepend-icon">
<input type="text" asp-for="#Model.Name" name="Name" class="form-control input-lg" placeholder="Your Full Name" maxlength="50" required>
<i class="nc-icon-outline users_single-03"></i>
</div>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<div class="prepend-icon">
<input type="email" asp-for="#Model.Email" name="Email" class="form-control input-lg" placeholder="Email" maxlength="200" required />
<i class="nc-icon-outline ui-1_email-85"></i>
</div>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<div class="prepend-icon">
<input type="tel" asp-for="#Model.Phone" name="Phone" class="form-control input-lg" placeholder="Phone Number" maxlength="25" required>
<i class="nc-icon-outline ui-2_phone"></i>
</div>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-6">
<select class="form-control" asp-for="#Model.ContactReason" name="ContactReason" data-container-class="input-lg" required style="height:46px !important">
<option value="">Choose a Reason</option>
<option value="Home Remediation">Home Remediation</option>
<option value="Commercial Remediation">Commercial Remediation</option>
<option value="Employment Opportunities">Inquire about employment oppotunities</option>
<option value="Other">Other</option>
</select>
</div>
<div class="col-md-6">
</div>
</div>
</div>
<div class="form-group">
<textarea asp-for="#Model.Message" class="form-control" rows="10" name="Message" placeholder="Message" required></textarea>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<div class="g-recaptcha" data-sitekey="mysitekeyishere"></div>
<input type="hidden" name="RecaptchaResponse" value="" />
</div>
<button type="submit" id="form-submit" class="btn btn-primary btn-lg icon-left-effect"><i class="nc-icon-outline ui-1_email-85"></i><span>Send message</span></button>
<div id="msgSubmit" class="hidden"></div>
</form>
Here is a look at the viewmodel:
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Threading.Tasks;
namespace PublicWebsite.Models.Contact
{
public class ContactFormViewModel
{
[StringLength(50)]
public string Name { get; set; } = "";
[StringLength(200)]
public string Email { get; set; } = "";
[StringLength(25)]
public string Phone { get; set; } = "";
[StringLength(50)]
public string ContactReason { get; set; } = "";
public string Message { get; set; } = "";
[StringLength(250)]
public string ServerResponse { get; set; } = "";
public bool ServerResponseSuccess { get; set; } = false;
}
}
Inside of the Contact Index CSHTML page for Contact, I render the partial view without any issues.
#section Scripts {
<script src="#validatorPath"></script>
<script type="text/javascript">
$(function () {
$(document).on('submit', '#contactForm', function (e) {
$form = $(this);
$url = $form.attr('action');
$.ajax({
type: "POST",
url: $url,
data: $form.serialize(), // serializes the form's elements.
success: function (data) {
loadFormData(data); //This works
resetCaptcha();
},
error: function (data) {
alert(data);
}
});
e.preventDefault(); // avoid to execute the actual submit of the form.
});
function loadFormData(data) {
$formContainer = $('.contact-form-container');
$formContainer.empty();
$formContainer.html(data);
console.log(data); //This reports back the same results
}
function resetCaptcha() {
//reset captcha
$('.g-recaptcha').empty();
$.getScript('#recaptchaUrl');
}
});
</script>
}
<div class="col-md-7 contact-form-container">
#{ await Html.RenderPartialAsync("_ContactForm", new ContactFormViewModel()); }
</div>
Everything renders properly. As seen in the screenshot below.
Once the items are filled out, the following sendmessage function is called as seen in the scripts section above.
[HttpPost]
public async Task<IActionResult> SubmitMessage(ContactFormViewModel contactForm)
{
var captchaResponse = Request.Form["g-recaptcha-response"].ToString();
if (string.IsNullOrWhiteSpace(captchaResponse))
{
contactForm.ServerResponse = _errorCaptchaMessageBlank;
}
else
{
if (await ValidCaptcha(captchaResponse))
{
try
{
await SendCustomerMessage(contactForm);
var customerName = contactForm.Name;
//This works
contactForm = new ContactFormViewModel
{
ServerResponse = String.Format(_successfulSendMessage, customerName.Split(' ')[0]),
ServerResponseSuccess = true
};
}
catch
{
contactForm.ServerResponse = _errorCaptchaMessageInvalid;
}
}
else
{
contactForm.ServerResponse = _errorCaptchaMessageInvalid;
}
}
//This works and I get the response back on the front end
return PartialView("_ContactForm", contactForm);
}
You can even see the message errors on a successful attempt to the server (i.e. the server response as shown in the HTML) and it keeps the user's info as it should so they don't have to re-enter the data as shown in the image below.
Now on success, notice in the code above I create a new Contact Form with cleared values and a success message. However, the same information stays filled in like below. I want the contact form to be cleared out.
I have attempted even just returning back a completely new view model but still have the same problem where all of the data is almost cached. In my console.log response from the server, I get a partial view result with the values pre-filled so I know it's not a browser issue. Even when I debug the CSHTML page, I only see the server response and the success = true, all other fields are blank.
Any help to figure out why the server is still returning a partial view result with the filled in data would be much appreciated.
You can add this to your success callback function:
$('#contactForm').find('input[type=text], textarea, select').val('');
It basically finds all input fields within the form and clears out their values.
Try to change your success callback function like below:
success: function () {
document.getElementById("contactForm").reset();
},
Clearing model state helped to resolve a similar problem when Partial method returned messed-up data:
public PartialViewResult OnPostData()
{
...
ViewData.ModelState.Clear();
return Partial("_ViewName", model);
}
I'm working on a MVC-project for fun that takes data from a public API, shows it, and calculates it depending on user input; I'm nearing the end of my goal, but one issue I've been having trouble with for the past day is blocking my progress.
The issue is as follows:
I want to be able to take data from my Controller, and show on button-press in my view, inside a writable text-box (so the user can both auto-generate data by inputting username and fetching their data from the public API, or specify their own custom data).
View
#{
ViewBag.Title = "Herblore";
Enter you name #Html.TextBox("Name")
<input type="submit" id="SubmitName" value="Submit" />
<script type = "text/javascript">
$('#SubmitName').click(function() {
var url = "/Calculator/PlayerLevelMsg";
var name = $('#Name').val();
$.get(url, {
Brugername: name
}, function(data) {
$("#lData").html(data);
});
})
</script>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-3">
<h3 style="font-size: 24px">Current Level</h3>
</div>
<div class="col-md-3 col-md-pull-1">
<h3><output id="lData"/></h3>
</div>
<div class="col-md-3 col-md-pull-1">
<h3 style="font-size: 24px">Current EXP</h3>
</div>
<div class="col-md-3 col-md-pull-2">
<h3><input type="text" id="lData" /></h3>
</div>
</div>
</div>
</div>
My Javascript allows me to run this controller in my calculator controller class:
public string PlayerLevelMsg(string BrugerName) {
int Firemaking = 12;
var playerdata = new OS_Efficiency_Calculator.Controllers.PlayerSearchController();
string PlayerLevel = playerdata.GetLevel(BrugerName, Firemaking);
string moreLevel = "PlayerLevel = 85";
if (!String.IsNullOrEmpty(BrugerName))
return "Player Level" + " " + moreLevel;
else
return "Please enter your name.";
}
Which returns a string that holds a single value from the API - this shouldn't be important, in the name of reproducing my issue, commenting out the strings gathered from other classes in my project and using a basic text string will give you the same result as I'm getting, so if you wish to reproduce:
public string PlayerLevelMsg(string BrugerName) {
if (!String.IsNullOrEmpty(BrugerName))
return "Player Level = 99";
else
return "Please enter your name.";
}
My issue is as follows;
Using the above code, I can view the output of my controller just fine in the line "<output id="lData"/>" - however, this isn't a text-box, so the user can't edit it.
on the other hand, will not. This is likely because it's an input type, but I can't find a textbox-output type, nor am I experienced enough in MVC to fully understand why I can't just bind the textbox to the value through the ID, when that would work just fine in a general WPF application (where I've spent the most time practicing).
It seems to me that there should be some super-simple answer to this, and I hope you guys can help me, and that the semi-code provided is adequate; As said, the ideal solution is that in this picture:
Both of the values would be "85", but the text-box is adamant that it isn't supposed to change - Thanks so much for taking the time to look through!
#{
ViewBag.Title = "Herblore";
Enter you name #Html.TextBox("Name")
<input type="submit" id="SubmitName" value="Submit" />
< script type = "text/jscript" >
$('#SubmitName').click(function() {
var url = "/Calculator/PlayerLevelMsg";
var name = $('#Name').val();
$.get(url, {
Brugername: name
}, function(data) {
$("#lData").val(data);
});
})
< /script>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-3">
<h3 style="font-size: 24px">Current Level</h3>
</div>
<div class="col-md-3 col-md-pull-1">
<h3><input type="text" id="lData"/></h3>
</div>
<div class="col-md-3 col-md-pull-1">
<h3 style="font-size: 24px">Current EXP</h3>
</div>
<div class="col-md-3 col-md-pull-2">
<h3><input type="text" id="lData" /></h3>
</div>
</div>
</div>
</div>
You need to make lData an input field with the type text and in the JavaScript function set the value of the field to the data returned from the controller.
Please visit this site to learn more about the input field: http://www.w3schools.com/tags/tag_input.asp