How to call client side click on html submit button in mvc

Question

Hello Friends,
please help me i am new in MVC Dot net, and i am try to insert label value on database i have a two labels first for IP address and Second for Current running time and three submit buttons checkin, checkout and going for personal task. on page load checkout and personal task buttons are hidden, only show 2 labels and check in button.
when i am clicking on checkin button both labels value stored in database ms sql2008 . and automatically checkout and personal task button should be enabled and check in button should be disabled.
when i am doing this task with jquery or java script on click event then my insertion task on controller not working only jquery worked.

please help me how i can calling client side click event with html submit button..

my code is: on view -->

 <button id="btnchkin" value="CheckIn" type="submit" name="action"/>
  <input type="submit"  id="btntask" name="action"  value="PersonalTask" />
   <input type="submit" id="btnchkout" name="action"  value="CheckOut" />

on script tag -->

 $("#btnchkin").click(function () {

    alert("a");
    //  $('#btnchkin').prop('disabled', true);
    $('#btntask').prop('disabled', false);
    $('#btnchkout').prop('disabled', false);
    $('#btnchkin').prop('disabled', true);

    //alert("b");
});

and controller-->

[HttpPost]
[ActionName("Index")]
public ActionResult Index( string lblIP1)
{

        DateTime datetime = DateTime.Now;
        string date = datetime.ToString();
        date = datetime.Date.ToString();
        lblIP1 = ipp;
        string ip = lblIP1;

        string s = DateTime.Now.ToString("hh:mm:ss tt");

        EmployeeSchedule emp = new EmployeeSchedule();
        emp.IP = ip;
        emp.CurrentDate = Convert.ToDateTime(date);
        emp.CheckInTime = s.ToString();

        BAL_EmployeeSchedule employeeBusinessLayers = new BAL_EmployeeSchedule();
        employeeBusinessLayers.AddEmployee(emp);

        ViewBag.ip = ipp;


    return View();
}

Hello, so do you want to push a button in your browser and return data from your server to the client via JSON or do you want the page to reload and return a model containing your data? — user1477388, Apr 10 '14 at 13:44
I don't know what that means. What buttons do you want to enable and disable, and upon what conditions do you want them to be so? — user1477388, Apr 10 '14 at 13:47
in server tags we can use OnClientClick event to use jquery or java script . same i want this in mvc — shweta, Apr 10 '14 at 13:48
When i clicked on First(checkin) button, other 2 buttons should be enable and first button (checkin) should be disabled.with inserting labels data on database. other 2 buttons ( checkout and personal task buttons) are disabled on page load . — shweta, Apr 10 '14 at 13:50

user1477388 · Accepted Answer · 2014-04-10T17:55:21.283

0

Here is your controller method:

public ActionResult Index()
{
    // return view to show three buttons...
    ViewBag.IsCheckedIn = false;
    return View();
}

Here is your view:

<script type="text/javascript">
    $(document).ready(function() {
        @if (ViewBag.IsCheckedIn)
        {
            <text>
                $('#btntask').prop('disabled', false);
                $('#btnchkout').prop('disabled', false);
                $('#btnchkin').prop('disabled', true);
            </text>
        }
        else
        {
            <text>
                $('#btntask').prop('disabled', true);
                $('#btnchkout').prop('disabled', true);
                $('#btnchkin').prop('disabled', false);
            </text>
        }
    });
</script>
<button id="btnchkin" value="CheckIn" type="submit" name="action"/>
<input type="submit"  id="btntask" name="action"  value="PersonalTask" />
<input type="submit" id="btnchkout" name="action"  value="CheckOut" />

Here is your post controller method:

[HttpPost]
public ActionResult Index()
{
    ViewBag.IsCheckedIn = true;
    return View();
}

Please let me know if this is what you wanted.

edited Apr 10 '14 at 17:55

answered Apr 10 '14 at 13:59

user1477388

20,790
32
144
264

yes @user1477388 i want same this but when i am doing this script tag then i want error on $('#btnchkin') "Too many characters in character literal" – shweta Apr 10 '14 at 17:52
Sorry, you must also add `` for Razor + javascript. See my edit. – user1477388 Apr 10 '14 at 17:55
You need the `@` if you want it to be executed as Razor, but you could remove it and then put `if (@ViewBag.IsCheckedIn)` and it would be executed as javascript. Let me know how it works out. – user1477388 Apr 10 '14 at 18:15
I just learned two days about MVC and i must to do this task in 2 days for my job.. please help me out.. please .. – shweta Apr 10 '14 at 18:33
Of course I will help you. But, first I must know what the problem is. If your code is like mine then it should work without issue as per http://stackoverflow.com/questions/5614941/mix-razor-and-javascript-code. Have you tried building your project/solution? Sometimes, the IDE will say there is a syntax error, when there actually is no error. – user1477388 Apr 10 '14 at 18:43
Thank You so much @user1477388 .now my data is storing in database and enabled disabled is also working nice.. using it works great . whats the mean of here...why we used this... – shweta Apr 11 '14 at 04:59
can you solve my other problem . now on click of personal task button on text area will open like jquery and background form will disable. and text area value will save in db. – shweta Apr 11 '14 at 05:03
Post a new question with a link back here. If I can't help you, someone else likely will try. – user1477388 Apr 11 '14 at 13:55
ya i have already created new question for that http://stackoverflow.com/questions/23007760/how-to-show-textarea-popup-window-on-submit-button-in-mvc-dotnet – shweta Apr 12 '14 at 07:50

How to call client side click on html submit button in mvc

1 Answers1

Linked