Edit string value on button click in ASP.Net MVC-CodePudding

I'm trying to do something that seems simple but I can't for the life of me figure out how to do it... I'm currently trying to learn about ASP.Net using MVC with C#.

Here's a simplified example of what I'm trying to do.

On my Views page i have a button, when i click that button i want it to somehow send data to change a string. My string is on my Models page. Now in my head it should somehow be possible to change this string through the controller page, where i have a method to do this but i have no idea how to use that method.

This is in my Index.cshtml

<button type="submit" id="buttonseven">
    <p id="btntxt">7 </p>
    @Html. <!--WHAT TO DO HERE???-->
</button>

And something like this is in my controller page

[HttpPost]
public ActionResult UpdatString()
{
    calc._display = "7";
    return View(calc);
}

To give you a better idea of what I'm trying to do here's an image, when a button is clicked it should update the number shown in the calculator:

I've tried searching online on how to do this but haven't found anything specifically for my need. I really hope someone can help me out here.

CodePudding user response：

@Victor, This is my view. The model is just a simple get set for input, operator and output.

@{
    ViewBag.Title = "Calculator";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@model WebsiteProject.Models.Calculator

<div id="sidebar">
    <div id="sidebarheadericon" style="background-image: url('../Content/welcome.png')"></div>
    <div id="headertext"><h1>Welcome</h1></div>
    <hr id="seperator" />
    <p >test</p>
    <a href="@Url.Action("UpdateString", "Calculator", new { button = 7 })">7 Calc</a>
    <a href="@Url.Action("UpdateString", "Calculator", new { button = 8 })">8 Calc</a>
    <a href="@Url.Action("Execute", "Calculator")">Execute Calc</a>
    <input type="text" name="total" value="1823" />
</div>
                                                        https://bobbyhadz.com/blog/javascript-append-text-to-textarea
<div >
    <div id="calculatormessage">
        <h2>Calculator</h2>
        <div  id="calcpanel">
            <div id="calcdisplay">
                @Html.DisplayFor(model => model._display)
            </div>
            <!--Row-->
            <button onclick="myFunction(this)" id="calcbtn">
                <p id="btntxt">7 </p>
            </button>
            <button id="calcbtn">
                <p id="btntxt">8 </p>

            </button>
            <button id="calcbtn">
                <p id="btntxt">9 </p>

            </button>
            <button id="calcbtn">
                <p id="btntxt">  </p>
            </button>
            <!--Row-->
            <button id="calcbtn">
                <p id="btntxt">4 </p>
            </button>
            <button id="calcbtn">
                <p id="btntxt">5 </p>
            </button>
            <button id="calcbtn">
                <p id="btntxt">6 </p>
            </button>
            <button id="calcbtn">
                <p id="btntxt">- </p>
            </button>
            <!--Row-->
            <button id="calcbtn">
                <p id="btntxt">1 </p>
            </button>
            <button id="calcbtn">
                <p id="btntxt">2 </p>
            </button>
            <button id="calcbtn">
                <p id="btntxt">3 </p>
            </button>
            <button id="calcbtn">
                <p id="btntxt">* </p>
            </button>
            <!--Row-->
            <button id="calcbtn">
                <p id="btntxt">0 </p>
            </button>
            <button id="calcbtn">
                <p id="btntxt">. </p>
            </button>
            <button id="calcbtn">
                <p id="btntxt">C </p>
            </button>
            <button id="calcbtn">
                <p id="btntxt">/ </p>
            </button>
            <!--Row-->
            <button id="calcbtnxl">
                <p id="btntxt">Calculate </p>
            </button>
            <button id="calcbtnxl">
                <p id="btntxt">Reset </p>
            </button>
        </div>
    </div>
</div>

CodePudding user response：

A solution will be simpler if to use a JavaScript function.

On the controller side:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var model = new Calculator(); 
        return View(model);
    }
  
    public JsonResult DigitClicked(string text, string button)
    {
        // TODO: Some logic depend on `button`
        string result = text   button;      
        
        // Result to send back 
        return Json(result, JsonRequestBehavior.AllowGet);
    }
}

public class Calculator
{
    public string _display{ get; set; }
}

Code of the index.cshtml view:

@model Models.Calculator

@section Scripts {
    @Scripts.Render("~/Scripts/jquery-3.3.1.min.js")
    @Scripts.Render("~/Scripts/jQuery.validate.min.js")
    @Scripts.Render("~/Scripts/jQuery.validate.unobtrusive.min.js")

    <script type="text/javascript">

        function myFunction(btn) {

            let text = $("#_display").val();
            let button = btn.firstChild.textContent;
            $.ajax({
                type: "GET",
                url: '@Url.Action("DigitClicked", "Home")',
                contentType: "application/json;charset=utf-8",
                data: { text, button },
                dataType: "json",

                success: function (data) {                   
                    document.getElementById("_display").value = data;
                }
            });
        };
    </script>
}

<br>

@Html.TextBoxFor(m =>Model._display, htmlAttributes: new { id = "_display", dir = "rtl" })

<button onclick="myFunction(this)"><p>1</p></button>
<button onclick="myFunction(this)"><p>2</p></button>
<button onclick="myFunction(this)"><p>3</p></button>
<button onclick="myFunction(this)"><p>4</p></button>

@* Another buttons here ... *@

<button onclick="myFunction(this)"><p>Calculate</p></button>

NOTE: Your code contains lot of tags with the same id. Take to account that the HTML id attribute is used to specify a unique id for an HTML element. You cannot have more than one element with the same id in an HTML document. See HTML id Attribute