Home MVC Razor build onclick event dynamically to show modal
Reply: 3

MVC Razor build onclick event dynamically to show modal

peggy
1#
peggy Published in 2017-11-14 16:09:33Z

I am currently trying to attach a click handler to my <a> tag which will pop up my modal which has a dynamic id. I am having trouble figuring out the syntax to accomplish this- my current attempt can be found below and has a syntax error on onclick="$('#"+ @modalId + "')" (which is the part im struggling a bit with). How can I accomplish this?

var modalId = string.Format("docusign{0}", doc.Id)
<a href="#" onclick="$('#"+ @modalId + "').modal('toggle')">@string.Format("Document {0}", EnumHelper.GetDisplayName(doc.DocumentType))</a>

<div id="@modalId" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header" style="background-color:#337ab7;color:#ffffff">
         <button type="button" class="close" data-dismiss="modal">&times;</button>
         <h4 class="modal-title">DocuSign Notice</h4>
      </div>
      <div class="modal-body form-group">
      <h5>Please allow up to 10 minutes for us to receive your e-form after you have completed it. To continue and fill out the necessary e-form, please click the "Fill Form" button below</h5>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default pull-right" data-dismiss="modal">Close</button>
      <a class="btn btn-default pull-left" href=@doc.DocuSignPowerFormLink>Fill Form</a>
      </div>
    </div>
  </div>
</div>
Zabavsky
2#
Zabavsky Reply to 2017-11-14 16:17:36Z

Try this

<a href="#" onclick="$('#@modalId').modal('toggle')">@string.Format("Document {0}", EnumHelper.GetDisplayName(doc.DocumentType))</a>

Shyju
3#
Shyju Reply to 2017-11-14 16:35:50Z

Your current code is rendering markup like this (Assuming the value of doc.Id is 123

<a href="#" onclick="$('#" +="" docusign123"" "').modal('toggle')"="">Your text</a>

You have extra " before and after the value the C# variable. and extra +

So basically your jQuery selector is

 $('#" +="" docusign1324"" "') 

which is not correct

All you need is, render the value of @modalId and use that after # part of your jQuery selector.

This should work

<a href="#" onclick="$('#@modalId').modal('toggle');">Your text</a>

If you want to be more readable, you can wrap the C# expression inside ( and )

<a href="#" onclick="$('#@(modalId)').modal('toggle');">Your text</a>
Ashiq Emran
4#
Ashiq Emran Reply to 2017-11-14 16:25:56Z

You concatenated in onclick event which is not correct you can use directly your variable inside like this $('#@modalId').modal('toggle') just this simple mistake is the issue of this error also when you are writting any c# statement inside razor must use @ before you start because there is no @ before var modalId

    @var modalId = string.Format("docusign{0}", doc.Id)
<a href="#" onclick="$('#"+ @modalId + "').modal('toggle')">@string.Format("Document {0}", EnumHelper.GetDisplayName(doc.DocumentType))</a>

<div id="@modalId" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header" style="background-color:#337ab7;color:#ffffff">
         <button type="button" class="close" data-dismiss="modal">&times;</button>
         <h4 class="modal-title">DocuSign Notice</h4>
      </div>
      <div class="modal-body form-group">
      <h5>Please allow up to 10 minutes for us to receive your e-form after you have completed it. To continue and fill out the necessary e-form, please click the "Fill Form" button below</h5>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default pull-right" data-dismiss="modal">Close</button>
      <a class="btn btn-default pull-left" href=@doc.DocuSignPowerFormLink>Fill Form</a>
      </div>
    </div>
  </div>
</div>
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.31397 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO