How do I perform this simple task in ASP.NET MVC

Question

0.00/5 (No votes)

See more:

Hello everyone..please help me to perform this very simple task in ASP.NET MVC

I can do this thing in ASP.NET Web Forms very very easily BUT i am unable to do in MVC as i have just started learning ASP.NET MVC

The simple task is to change the button background color on click randomly every time:-

Now, this i can do very easily in web forms like this=>

ASP.NET

<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click"/>

C#

protected void Button1_Click(object sender, EventArgs e)
        {
            Button1.BackColor = System.Drawing.Color.FromArgb(new Random().Next());
        }

Now just with these tow lines i can perform this very simple task in ASP.NET WebForms
But I am finding it very hard to do this in MVC

So it will be great if anyone could just demo me to do this simple task in MVC

also please suggest me some good and easy ASP.NET MVC tutorials

also please tell me Why MVC is better then Web Forms because its very easy to do things in Web Forms than in MVC

What I have tried:

I have tried in both Web Forms and MVC but i am unable to do in MVC
please tell me how to do it in MVC
thanks

Posted 16-Jul-17 21:17pm

Palash Sachan

Updated 16-Jul-17 22:26pm

v2

Add a Solution

3 solutions

Solution 1

Maybe a little bit JavaScript might help you.

<script>
    function getRandomColor() {
        var letters = '0123456789ABCDEF';
        var color = '#';
        for (var i = 0; i < 6; i++) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
    }
</script>

<input id="Button1" type="button" value="Click Me!" onclick="document.getElementById('Button1').style.background = getRandomColor()"/>

Posted 16-Jul-17 21:28pm

TheRealSteveJudge

Comments

Palash Sachan 18-Jul-17 4:22am

thanks for the reply..but i don't want to do this with javascript..

Solution 2

The reason why MVC is better than web forms is actually that you cannot perform this task on the backend so your presentation layer doesn't become bloated with both business logic and presentation logic.
Separation of concerns is clearly the benefit of APS.NET MVC, on the contrary to huge aspx.cs files that are impossible to maintain.
Instead, handle your presentation logic with javascript.
Somewhere in your cshtml

JavaScript

<button id="yourButtonId"/>
<script type="text/javascript">
    function getRandomColor() {
        var letters = '0123456789ABCDEF';
        var color = '#';
        for (var i = 0; i < 6; i++) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
    }

    function modifyBackgroundColor(event) {
        event.currentTarget.style.backgroundColor = getRandomColor();
    }

    var yourButton = document.getElementById("yourButtonId");
    yourButton.addEventListener("click", modifyBackgroundColor, false);
</script>

Posted 16-Jul-17 21:36pm

Bohdan Stupak

Comments

Palash Sachan 18-Jul-17 4:22am

thanks for the reply..but i don't want to do this with javascript..

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

F-ES Sitecore · Accepted Answer · 2017-07-16T22:26:00

You don't have the concept of server controls in MVC so you need to set any control properties via the View, so there's a bit more work that needs done and you need to understand html which is something that webforms abstracts away from you.

@model MyModel

@using (Html.BeginForm())
{
    <input type="submit" style="background-color: @(System.Drawing.ColorTranslator.ToHtml(Model.SubmitColour))"/>
}

The view uses a property of the model called SubmitColour which is a Color object and we'll set that in the controller.

public class MyModel
{
    public Color SubmitColour { get; set; }
}

[HttpGet]
public ActionResult Index()
{
    MyModel m = new MyModel();

    return View(m);
}

[HttpPost]
public ActionResult Index(MyModel model)
{
    model.SubmitColour = System.Drawing.Color.FromArgb(new Random().Next());

    return View(model);
}

Contrary to popular belief javascript isn't required to do everything in MVC, the web worked long before it was invented and still works without it now :)

Edit: For an MVC tutorial google "MVC Music Store"