locked
Best JavaScript framework or library to use with .Net web application. RRS feed

  • Question

  • User2015884762 posted
    Hi, what's the most suitable JavaScript framework or library that we should use with a . Net web application, specifically . Net web forms. Would love to hear about other people's experience in setting up n using them?
    Saturday, February 2, 2019 11:48 AM

Answers

  • User-893317190 posted

    Hi callykalpana,

    I have made a sample , you could have a refer.

    Below is my code.

     <form id="form1" runat="server">
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
                <Columns>
                    <asp:TemplateField HeaderText="textboxes">
                        <ItemTemplate>
                            <asp:TextBox runat="server" ID="box"></asp:TextBox>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
    
    
    
    
    <!--here is the new window--> <div class="modal" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <div> <span>radio1</span><input type="radio" name="rad" /> </div> <div> <span>radio2</span><input type="radio" name="rad" /> </div> <div> <span>radio3</span><input type="radio" name="rad" /> </div> <div> <span>radio4</span><input type="radio" name="rad" /> </div> <div> <span>radio5</span><input type="radio" name="rad" /> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" ></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" ></script> </form> <script> $(function () { var current; // record current textbox $('.modal :radio').change(function () {
    // bind change event to radios, if any radio's state changes, make the current textbox's value equals to checked value
    //selector :radio:checked could choose the checked radio if (current) { current.val($('.modal :radio:checked').siblings("span").html()) ; } }) // bind blur event to textboxes $("#GridView1 input[type=text]").blur(function () { //this is the current textbox var $box = $(this);
    //change the current textbox current = $box;
    var count = 0; //loop through all the span $(".modal-body span").each(function (index, ele) { // if span's html equala to textbox's value , make its sibling radio checked if ($(ele).html() == $box.val()) { $(ele).siblings(":radio").prop("checked", true); count++; } })
    //if no radio is checked, default is the first if (count == 0) { $(".modal-body :radio:first").prop("checked", true); }
    // show the modal $(".modal").modal(); }) }) </script>

    When I input radio5 in the textbox and leave the textbox, the result shows. The redio reflects the textbox's value. If you don't like blur event , you could also bind click event.

    In addition,  I use radio to make the user could only choose  one radio

    I use bootstrap modal to show new window, you could refer to the link below for more information about bootstrap modal.

    https://getbootstrap.com/docs/4.2/components/modal/

    Best regards,

    Ackerly Xu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, February 4, 2019 8:19 AM

All replies

  • User475983607 posted

    Hi, what's the most suitable JavaScript framework or library that we should use with a . Net web application, specifically . Net web forms. Would love to hear about other people's experience in setting up n using them?

    Depends on what you are trying to do.  Most likely jQuery.

    https://jquery.com/

    Saturday, February 2, 2019 2:33 PM
  • User-2054057000 posted

    I don't think that today you really need any JavaScript library at all. The JavaScript (known as ECMAScript 2016) can do all your work.

    There is a very good resource in GitHub that tells you how to use JavaScript at all situations. You can check it here.

    Thanks & Regards

    Saturday, February 2, 2019 4:36 PM
  • User-893317190 posted

    Hi callykalpana,

    There are many javascript framework, jquery, vue.js , angular, react.js.

    But web form tends to hide javascript from programming and try to do almost everything in code behind using web from controls.

    Framework like vue.js, angular, react.js tends to finish their work at client side (even in a single page that never posts back, which conflicts with webform).

    They have their own design.

    If you want to use the three popular framework, you had better use web api. https://docs.microsoft.com/en-us/aspnet/web-api/overview/getting-started-with-aspnet-web-api/tutorial-your-first-web-api

    However,  in web form , only small framework like jquery works well, you could use its simple and sufficent api to select dom element, change their property, insert or delete new element before the page posts back and still  make use of webform control.

    Best regards,

    Ackerly Xu  

    Monday, February 4, 2019 3:02 AM
  • User2015884762 posted

    Hi all

    Thank you, I was caught between needing to learn new framework like Angular to keep myself updated, but I was not able to find the right resources for it. Hence the reason why I asked which library or framework suits .Net Web Forms. I guess I will go with Jquery, getting the application up and running is the priority now. 

    What I really wanted to was something like this :

    I have a gridview with a textbox column, on mouseclick, I wanted a popup window that contains a list of checkboxes, containing the value in the textbox to appear as checked in the checkbox. User can then select another checkbox (and it would update the value the textbox ). 

    I believe this is achievable through Jquery ( have not done worked on it yet ), any suggestion if this is viable with Jquery.

    Monday, February 4, 2019 3:25 AM
  • User-893317190 posted

    Hi callykalpana,

    I have made a sample , you could have a refer.

    Below is my code.

     <form id="form1" runat="server">
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
                <Columns>
                    <asp:TemplateField HeaderText="textboxes">
                        <ItemTemplate>
                            <asp:TextBox runat="server" ID="box"></asp:TextBox>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
    
    
    
    
    <!--here is the new window--> <div class="modal" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <div> <span>radio1</span><input type="radio" name="rad" /> </div> <div> <span>radio2</span><input type="radio" name="rad" /> </div> <div> <span>radio3</span><input type="radio" name="rad" /> </div> <div> <span>radio4</span><input type="radio" name="rad" /> </div> <div> <span>radio5</span><input type="radio" name="rad" /> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" ></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" ></script> </form> <script> $(function () { var current; // record current textbox $('.modal :radio').change(function () {
    // bind change event to radios, if any radio's state changes, make the current textbox's value equals to checked value
    //selector :radio:checked could choose the checked radio if (current) { current.val($('.modal :radio:checked').siblings("span").html()) ; } }) // bind blur event to textboxes $("#GridView1 input[type=text]").blur(function () { //this is the current textbox var $box = $(this);
    //change the current textbox current = $box;
    var count = 0; //loop through all the span $(".modal-body span").each(function (index, ele) { // if span's html equala to textbox's value , make its sibling radio checked if ($(ele).html() == $box.val()) { $(ele).siblings(":radio").prop("checked", true); count++; } })
    //if no radio is checked, default is the first if (count == 0) { $(".modal-body :radio:first").prop("checked", true); }
    // show the modal $(".modal").modal(); }) }) </script>

    When I input radio5 in the textbox and leave the textbox, the result shows. The redio reflects the textbox's value. If you don't like blur event , you could also bind click event.

    In addition,  I use radio to make the user could only choose  one radio

    I use bootstrap modal to show new window, you could refer to the link below for more information about bootstrap modal.

    https://getbootstrap.com/docs/4.2/components/modal/

    Best regards,

    Ackerly Xu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, February 4, 2019 8:19 AM
  • User2015884762 posted

    Thank you for the advice and the sample codes.

    Thursday, February 7, 2019 7:14 AM