1

So, so so many questions on this, and yet I can't for the life of me find a SIMPLE answer for a SIMPLE question.

Ok, so I have an ASP MVC (c#) with razor view project (with a layout created by the great DevExpress People) - Great! :)

The Situation

I've a <button>, and a <p> displayed on my view - all good.

the button's ID is (funnily enough) myButton, and the paragraph is myParagraph.

I also have a HomeController with a simple method of 

        public string updateAlerts()
        {
            return "THIS IS AN IMPORTANT PARAGRAPH";
        }

My Question is:

Using the basics of 

<button id="myButton" onclick="myFunction()">This is a button</button>

What do I need to use to call this method?

there are lots of questions stating AJAX or JQuery - but in all honesty, I've not the foggiest idea of how to use those! (i'm an idiot, ok?)

So I wrote a script thing (which, to be honest, I don't think is 'fully' needed,

<script>
    function myFunction(){
    //how do I call this method here?
    var myString = ...

    document.getElementById("myButton").innerText = myString;
    }
</script>

Could anyone tell me how to fill this in the simplest/easiest-to-understand way possible?

Cheers

edit

I thought this answer would help, but either i'm just stupid (probably) or doesn't suit this situation (sad face).

I also don't know if it makes a 'huge' deal, but this 'paragraph' is also situated on one of the 'panels' (left nav bar to be precised)-and so will be seen on all pages of the system

Community
  • 1
  • 1

3 Answers3

0

In the view:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
$(document).ready(function(){
$('#myButton').click(function(){
  $.get('<%= Url.Action(ControllerName.updateAlerts()) %>', function (data)
    {
      $('#myParagraph').text(data);
    })
  });
});
</script>

Also note that if you're using Razor, replace <%= Url.Action(ControllerName.updateAlerts()) %> with @Url.Action(ControllerName.updateAlerts())

zaitsman
  • 8,984
  • 6
  • 47
  • 79
0

As you've guessed, you will need to use ajax.

Ajax is a group of interrelated Web development techniques used on the client-side to create asynchronous Web applications.

Read more about it on wiki.

What this means that different technologies/frameworks implement it in different way, jquery being one of them. The end result is more or less the same, communication with server, without inhibiting users actions (no browser freezing etc.)

To make it work, your best bet is to include jquery in your view:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

then:

<script>
$(function () {
    ('#mybutton').on('click', function(){
        $.ajax({      
            url: '@Url.Action(HomeController.updateAlerts())'      
        }).done(function(data){
           $('#myParagraph').text(data);
        });
    });
})
</script>
avidenic
  • 653
  • 7
  • 17
  • that url line doesn't seem to recognise the HomeController -when i add in the class path then it recognises the HomeController, but doesn't recognise the method :( –  Sep 25 '14 at 11:14
  • well depending on the configuration, you can try with this url 'home/updatealerts'. But has several "traps". First, its a "magic" string, meaning if you rename your controller or your action, it will bereak, second it works if routing is configured properly and if page is not hosted as a sub application. – avidenic Sep 25 '14 at 11:21
  • Seems to be working as **$.get('@Url.Action("updateAlerts", "Home")', function (data)** but I realisitcally didn't want to use ANY jscript/ajax/jquery (whatever it's called) in this project. The people i work with/for want to move right away from this sort of stuff (hence mvc) :( –  Sep 25 '14 at 11:27
  • 1
    Well if you do not want to use any javascript, then there is only 1 way of doing this. Full page reload every time you want some data. This only then works with form submits. – avidenic Sep 25 '14 at 11:30
  • @avidenic well, not only form submits. if they replace the button with an HTML anchor element, they will get ol'-school navigation :P – zaitsman Sep 26 '14 at 00:00
0

As you trying to modify your myButton innerText, so this should work fine:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $(document).ready(function () {
        $("#myButton").click(function () {
            $("#myParagraph").load("@Url.Action("updateAlerts","Home")");
        });
    });
});
</script>
aleha_84
  • 8,309
  • 2
  • 38
  • 46