locked
Calling Functions on Click RRS feed

  • Question

  • User573653794 posted

    Hello, I am working in ASP Webpages, in VS 2013. Now I have a .cshtml page and on that page I am showing some records(rows) which are being fetched from the database. Now what I am trying to do is that when I click on a record I want the user to redirect to another page, which has it's own content, but for that I first need to do some database operations on that same page. So, how can I access the Razor code which I click on a div or an HTML element.

    Thursday, December 17, 2015 8:28 PM

Answers

  • User-821857111 posted

    Yes. It's the way I would solve the problem.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, December 17, 2015 9:43 PM

All replies

  • User-821857111 posted

    You can add a client side click event handler (jQuery is best for this) to the div or other HTML element and in that handler, get or post a page that contains the logic to be executed. Then, if the logic is successfully executed, redirect the user to the final target using document.location.href. the code will look something like this:

    $("#divUserclicksOn").on("click", function(){
        $.get("/pageThatContainsLogic.cshtml", function(){
            document.location.href = "otherPage.cshtml";
        })
    });



    Thursday, December 17, 2015 8:36 PM
  • User573653794 posted

    Thanks Mike, this seems something. I will surely try it, are there some other methods as well ?

    Thursday, December 17, 2015 8:57 PM
  • User-821857111 posted

    Not really. There are variations of the same method - for example, you can do it without jQuery but you will have to write more code. But the basic approach will be the same.

    Thursday, December 17, 2015 9:25 PM
  • User573653794 posted

    Is it effective and efficient this way ?

    Thursday, December 17, 2015 9:38 PM
  • User-821857111 posted

    Yes. It's the way I would solve the problem.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, December 17, 2015 9:43 PM
  • User573653794 posted

    Ok , thanks Mike, I really appreciate it.

    Thursday, December 17, 2015 10:08 PM
  • User325035487 posted

    I use this

    For example my html like this from the web grid.

    <tr>
       <td><input type="checkbox" class="singleCheckBox" name="asid" value="10053" /></td>
       <td class="autofcol">AR-001</td>
       <td class="category">Auto Reader</td>
       <td class="autofcol">CSSD</td>
       <td class="manu">3 M health care</td>
       <td class="autofcol">22-Jan-2016</td>
    </tr>

    Jquery

    $(function () {
      $('.autofcol, .category, .manu, .model, .serial, .frequezy').hover(function () {
         $(this).closest('tr').toggleClass('clickable');
         }).on('click', function () {
            location.href = '/NewPage/' + $(this).closest('tr').find('td:nth-child(2)').text();
            });
        });

    As you can see I am making rows clickable using the classnames given to web grid columns. This way I am excluding this jquery from certain columns.

    The second part is the on click function which redirects to new page, while passing the text in second column of my table. using the ('td:nth-child(2)' selector.

    Thursday, December 17, 2015 10:12 PM
  • User325035487 posted

    Woa.. Didnt see the other answer.. I was typing it in. Good luck.

    Thursday, December 17, 2015 10:14 PM
  • User-1327394822 posted

    If you using webgrid, there are built in functions for webgrid. Like "selection"..

    <div>
            @if(grid.HasSelection){
                dynamic Item = grid.SelectedRow;
                <!--Method 1 -->
                <h3>Method 1 - Details :</h3>
                <p>@Item.ProductName, Price : @Item.UnitPrice</p>
                <!--Method 2-->
                @RenderPage("~/Templates/_details.cshtml", new { productData = Item })
            }
    
        </div>

    and in the webgrid add a column:

    grid.Column("ProductID", string.Empty, canSort: false, format: @<text>@item.GetSelectLink()</text>),

    Friday, December 18, 2015 6:46 AM